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文件，增加如下内容：

[javascript]  view plain copy print ?

1. CKEDITOR.editorConfig = function( config )  
2. {  
3.     config.language = 'zh-cn';  
4.     config.uiColor = '#336699';  
5.     config.height = 300; //高度  
6.     //工具栏  
7.     config.toolbar =  
8. [  
9.     ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],  
10.     ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],  
11.     ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],  
12.     ['Link', 'Unlink', 'Anchor'],  
13.     ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],  
14.     '/',  
15.     ['Styles', 'Format', 'Font', 'FontSize'],  
16.     ['TextColor', 'BGColor'],  
17.     ['Maximize', 'ShowBlocks', '-', 'Source', '-', 'Undo', 'Redo']  
18. ];  
19. };  

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

[xhtml]  view plain copy print ?

1. <mce:script type="text/javascript" src="ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script>  

及如下：

[xhtml]  view plain copy print ?

1. <div>  
2.       <asp:TextBox ID="txtSource" runat="server" Height="200px" TextMode="MultiLine"   
3.         Width="575px"></asp:TextBox>  
4.      <mce:script type="text/javascript"><!--  
5.          //关键！  
6.          CKEDITOR.replace('<%= txtSource.ClientID %>', { skin: 'kama' });   
7.        
8. // --></mce:script>  
9.     </div>  
10.     <div>  
11.      <asp:Button ID="btnGet" runat="server" onclick="btnGet_Click" Text="取值" />  
12.     　　　　<asp:Button ID="btnSet" runat="server" onclick="btnSet_Click" Text="赋值" />  
13.     <br />  
14.     <br />  
15.     <asp:TextBox ID="txtValue" runat="server" Height="200px" TextMode="MultiLine"   
16.         Width="575px"></asp:TextBox>  
17.     </div>  

后台代码如下：

[c-sharp]  view plain copy print ?

1. public partial class demoEditor : System.Web.UI.Page  
2.     {  
3.         #region Methods  
4.         void Page_Error(object sender, EventArgs e)  
5.         {  
6.             Exception ex = Server.GetLastError();  
7.             Response.Write("an   error   occurer: " + ex.Message);  
8.             if (ex.InnerException != null)  
9.             {  
10.                 Response.Write("detailed: " + ex.InnerException.Message);  
11.             }  
12.             Server.ClearError();  
13.         }  
14.         #endregion  
15.         #region Events  
16.         protected void Page_Load(object sender, EventArgs e)  
17.         {  
18.             //this.Error += new EventHandler(Page_Error);   
19.         }  
20.         protected void btnGet_Click(object sender, EventArgs e)  
21.         {  
22.             string value = txtSource.Text;  
23.             Page.Response.Write(value);  
24.         }  
25.         protected void btnSet_Click(object sender, EventArgs e)  
26.         {  
27.             txtSource.Text = txtValue.Text;  
28.         }  
29.         #endregion  
30.     }  

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

[xhtml]  view plain copy print ?

1. <system.web>  
2.     <pages validateRequest="false" />  
3. </system.web>   

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

[xhtml]  view plain copy print ?

1. <%@ Page validateRequest="false" %>   

还是出错。

 

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

[javascript]  view plain copy print ?

1. config.htmlEncodeOutput = true;  

 

OK!

 

 

源码下载：
DemoCkEditorAll