CKEditor在asp.net环境下的使用一例

以前习惯了FckEditor,编译为dll，一直在Asp.net环境下使用正常。

今天试用了一下CKEditor3.3.2,下载地址：http://ckeditor.com/download

由于该版本重新架构，因而不采用dll的形式，而代之以js模式。于是新建一项目(基于Framework 4)，项目结构如下：

一、首先配置CKEcitor

将下载的ckeditor_3.3.2.zip解压到ckeditor下，删除_source和_samples文件夹，保留lang文件夹下仅en.js,zh-cn.js,zh.cs,其余删除。

修改config.js文件，增加如下内容：

  
    

   
     
   
     CKEDITOR.editorConfig 
   
     =
   
      
   
     function
   
     ( config )
{
 config.language 
   
     =
   
      
   
     '
   
     zh-cn
   
     '
   
     ;
 config.uiColor 
   
     =
   
      
   
     '
   
     #336699
   
     '
   
     ;
 config.height 
   
     =
   
      
   
     300
   
     ; 
   
     //
   
     高度
   
     

   
      
   
     //
   
     工具栏
   
     

   
      config.toolbar 
   
     =
   
     
[
 [
   
     '
   
     Bold
   
     '
   
     , 
   
     '
   
     Italic
   
     '
   
     , 
   
     '
   
     Underline
   
     '
   
     , 
   
     '
   
     Strike
   
     '
   
     , 
   
     '
   
     -
   
     '
   
     , 
   
     '
   
     Subscript
   
     '
   
     , 
   
     '
   
     Superscript
   
     '
   
     ],
 [
   
     '
   
     NumberedList
   
     '
   
     , 
   
     '
   
     BulletedList
   
     '
   
     , 
   
     '
   
     -
   
     '
   
     , 
   
     '
   
     Outdent
   
     '
   
     , 
   
     '
   
     Indent
   
     '
   
     , 
   
     '
   
     Blockquote
   
     '
   
     ],
 [
   
     '
   
     JustifyLeft
   
     '
   
     , 
   
     '
   
     JustifyCenter
   
     '
   
     , 
   
     '
   
     JustifyRight
   
     '
   
     , 
   
     '
   
     JustifyBlock
   
     '
   
     ],
 [
   
     '
   
     Link
   
     '
   
     , 
   
     '
   
     Unlink
   
     '
   
     , 
   
     '
   
     Anchor
   
     '
   
     ],
 [
   
     '
   
     Image
   
     '
   
     , 
   
     '
   
     Flash
   
     '
   
     , 
   
     '
   
     Table
   
     '
   
     , 
   
     '
   
     HorizontalRule
   
     '
   
     , 
   
     '
   
     Smiley
   
     '
   
     , 
   
     '
   
     SpecialChar
   
     '
   
     , 
   
     '
   
     PageBreak
   
     '
   
     ],
 
   
     '
   
     /
   
     '
   
     ,
 [
   
     '
   
     Styles
   
     '
   
     , 
   
     '
   
     Format
   
     '
   
     , 
   
     '
   
     Font
   
     '
   
     , 
   
     '
   
     FontSize
   
     '
   
     ],
 [
   
     '
   
     TextColor
   
     '
   
     , 
   
     '
   
     BGColor
   
     '
   
     ],
 [
   
     '
   
     Maximize
   
     '
   
     , 
   
     '
   
     ShowBlocks
   
     '
   
     , 
   
     '
   
     -
   
     '
   
     , 
   
     '
   
     Source
   
     '
   
     , 
   
     '
   
     -
   
     '
   
     , 
   
     '
   
     Undo
   
     '
   
     , 
   
     '
   
     Redo
   
     '
   
     ]

];
};

  
    

 

二、新建一demoEditor.aspx，页面中添加如下：

  
    

   
     
   
      
   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
      src
   
     ="ckeditor/ckeditor.js"
   
     ></
   
     script
   
     >
  
    

及如下：

  
    

   
     
   
     <
   
     div
   
     >
   
     
 
   
     <
   
     asp:TextBox 
   
     ID
   
     ="txtSource"
   
      runat
   
     ="server"
   
      Height
   
     ="200px"
   
      TextMode
   
     ="MultiLine"
   
      
 Width
   
     ="575px"
   
     ></
   
     asp:TextBox
   
     >
   
     

 
   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
     >
   
     
 
   
     //
   
     关键！
   
     

   
      CKEDITOR.replace(
   
     '
   
     <%= txtSource.ClientID %>
   
     '
   
     , { skin: 
   
     '
   
     kama
   
     '
   
      }); 
 
   
     </
   
     script
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     <
   
     div
   
     >
   
     
 
   
     <
   
     asp:Button 
   
     ID
   
     ="btnGet"
   
      runat
   
     ="server"
   
      onclick
   
     ="btnGet_Click"
   
      Text
   
     ="取值"
   
      
   
     />
   
     
 　　　　
   
     <
   
     asp:Button 
   
     ID
   
     ="btnSet"
   
      runat
   
     ="server"
   
      onclick
   
     ="btnSet_Click"
   
      Text
   
     ="赋值"
   
      
   
     />
   
     
 
   
     <
   
     br 
   
     />
   
     
 
   
     <
   
     br 
   
     />
   
     
 
   
     <
   
     asp:TextBox 
   
     ID
   
     ="txtValue"
   
      runat
   
     ="server"
   
      Height
   
     ="200px"
   
      TextMode
   
     ="MultiLine"
   
      
 Width
   
     ="575px"
   
     ></
   
     asp:TextBox
   
     >
   
     
 
   
     </
   
     div
   
     >
  
    

后台代码如下：

  
    

   
     
   
      
   
     public
   
      
   
     partial
   
      
   
     class
   
      demoEditor : System.Web.UI.Page
 {

 
   
     #region
   
      Methods
   
     
 
   
     void
   
      Page_Error(
   
     object
   
      sender, EventArgs e)
 {

 Exception ex 
   
     =
   
      Server.GetLastError();
 Response.Write(
   
     "
   
     an error occurer: 
   
     "
   
      
   
     +
   
      ex.Message);
 
   
     if
   
      (ex.InnerException 
   
     !=
   
      
   
     null
   
     )
 {
 Response.Write(
   
     "
   
     detailed: 
   
     "
   
      
   
     +
   
      ex.InnerException.Message);
 }
 Server.ClearError();
 }

 
   
     #endregion
   
     

 
   
     #region
   
      Events
   
     

 
   
     protected
   
      
   
     void
   
      Page_Load(
   
     object
   
      sender, EventArgs e)
 {
 
   
     //
   
     this.Error += new EventHandler(Page_Error); 
   
     

   
      }

 
   
     protected
   
      
   
     void
   
      btnGet_Click(
   
     object
   
      sender, EventArgs e)
 {
 
   
     string
   
      value 
   
     =
   
      txtSource.Text;
 Page.Response.Write(value);
 }

 
   
     protected
   
      
   
     void
   
      btnSet_Click(
   
     object
   
      sender, EventArgs e)
 {
 txtSource.Text 
   
     =
   
      txtValue.Text;

 }
 
   
     #endregion
   
     

 }
  
    

三　调试页面，出现“A potentially dangerous Request.Form value was detected from the client",按照经验，在web.config中增加

  
    

   
     
   
     <
   
     system.web
   
     >
   
     
 
   
     <
   
     pages 
   
     validateRequest
   
     ="false"
   
      
   
     />
   
     

   
     </
   
     system.web
   
     >
   
      
  
    

还是同样错误，在页面头部加入，

  
    

   
     
   
     <%
   
     @ Page validateRequest
   
     =
   
     "
   
     false
   
     "
   
      
   
     %>
   
      
  
    

还是出错。

后来终于试着在config.js文件中添加下面一行：

  
    

   
     
   
     config.htmlEncodeOutput 
   
     =
   
      
   
     true
   
     ;
  
    

OK!

源码下载：
DemoCkEditorAll