以前习惯了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,页面中添加如下:
- <mce:script type="text/javascript" src="ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script>
及如下:
- <div>
- <asp:TextBox ID="txtSource" runat="server" Height="200px" TextMode="MultiLine"
- Width="575px"></asp:TextBox>
- <mce:script type="text/javascript"><!--
- //关键!
- CKEDITOR.replace('<%= txtSource.ClientID %>', { skin: 'kama' });
- // --></mce: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