文本編輯器 CKEditor 用法

最新文本編輯器，FCK升級版：CKEditor.NET

CKEditor.NET.dll 版本：3.6.4.0

官方網址：http://ckeditor.com/

 

效果圖：

 

 

配置web.config：

<system.web>
    <pages>
        <controls>
             <add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>
        </controls>
     </pages>

<system.web>

 

頁面上加入標籤：

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

 

在aspx頁面插入控件:

<CKEditor:CKEditorControl ID="txtRemark" runat="server"  BasePath="~/UserControl/ckeditor/"  Toolbar="Source|Preview|Templates|Cut|Copy|Paste|Undo|Redo|Bold|Italic|Underline|Font|FontSize|TextColor|BGColor|Maximize" Width="388px" Height="150px" >

 

工具欄設置，如在js中加載了此控件，那設置的工具欄則無效，需在js中從新設置工具欄：

3種方式設置：

     一、在頁面中設置：設置Toolbar屬性 以"|"分隔每一個菜單，"-"添加一個分割符，"/"添加一個換行

Toolbar="Source|Preview|Templates|Cut|Copy|Paste|Undo|Redo|Bold|Italic|Underline|Font|FontSize|TextColor|BGColor|Maximize"

   

    二、cs代碼：在代碼中加入（默認所有工具欄顯示）

"-" 分隔符，"/" 換行符，新的new object[] 爲一個分組

txtRemark.config.toolbar = new object[]

{

       new object[] { "Source", "-", "Preview", "-", "Templates" },

       new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },

       new object[] { "Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat" },

       new object[] { "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" },

       "/",

       new object[] { "Bold", "Italic", "Underline", "-", "Subscript", "Superscript" },

       new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent"},

       new object[] { "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" },

       new object[] { "Link", "Unlink", "Anchor" },

       new object[] { "Image", "Flash", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak", "Iframe" },

       "/",

       new object[] { "Styles", "Format", "Font", "FontSize" },

       new object[] { "TextColor", "BGColor" },

       new object[] { "Maximize" }

}

   三、JS中設置：調用加載編輯器控件 (若使用此方法，在頁面或代碼中設置的工具欄則無效，如不需js調用控件可採用第1種方法)

$(

   function ()

   {

               CKEDITOR.replace('txtRemark', {
                    toolbar : //重設工具欄
                              [

                                  ['Source', 'Preview',],
                                  ['Bold', 'Italic', 'Underline'],
                                  ['Outdent', 'Indent'],
                                  ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                                  ['Link', 'Unlink'],
                                  '/',
                                  ['Font', 'FontSize'],
                                  ['TextColor', 'BGColor','-','Maximize']
                              ]
                }); //編輯器

    }
);

 

js取值和賦值：

賦值：CKEDITOR.instances.txtRemark.setData("值");

取值：var obj = CKEDITOR.instances.txtRemark.getData();

 

 

cs代碼中獲取值：

txtRemark.Text