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