CKEditor asp.net

2 篇文章 0 订阅
2 篇文章 0 订阅

以前习惯了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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值