插件幫助文檔 --- CKEditor&CKFinder

 

官方網站：

http://ckeditor.com/

http://ckfinder.com/

 

 插件描述：

CKEditor是CFKeditor的升級版本，是一款功能強大的開源在線編輯器。並且將文件上傳管理功能獨立成為了CKFinder。

 

說明：因為時間倉促，總結的方法可能不太完善，因為我自己在使用過程中碰到了一些問題，但是沒有及時記錄。只能憑記憶和代碼介紹了基本使用情況。

 

建議：CKEditor有.NET的專用版本。建議下次開發ASP.NET WebForm時，總結出專業版本的文檔。更方便使用，包括文件重命名，文件上傳控制和系統安全性控制。

 

 

 

 

插件使用：

一、CKEditor的使用

1           在ThinksKing的Tools里面找到已經解壓好的ckeditor拷貝至項目中。（已經刪除_samples和_source文件，如果要繼續精簡，參見附錄1.）

2           為頁面添加CKEditor。

2.1          添加JS引用，添加TextBox服務控件，CssClass設置為ckeditor。

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<asp:TextBox ID="txtContent"  TextMode="MultiLine" CssClass="ckeditor"  runat="server"></asp:TextBox>

2.2          或者添加textarea，使用CKEDITOR.replace().

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<textarea cols="80" id="txtContent" name="content" rows="50"></textarea>

        <script type="text/javascript">

         CKEDITOR.replace('content', { height: 800, width: 600 });

</script>

2.3          或者引用CKEditor.NET.dll,然后注冊ckeditor控件。

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

    <CKEditor:CKEditorControl ID="ckeditor" runat="server"></CKEditor:CKEditorControl>

3           配置CKEditor.

打開ckeditor/config.js文件，配置如下：

/*

Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.

For licensing, see LICENSE.html or http://ckeditor.com/license

*/

CKEDITOR.editorConfig = function(config) {

 

config.language =  "zh-cn";//配置語言

config.skin = "v2";  //皮膚選擇，skins文件夾下

 config.resize_enabled = false; //關閉自由拖動打下，默認為打開

    config.font_names = '宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;' + config.font_names;

    config.toolbar =

[

['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],

['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],

['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',

['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],

['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'],

['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',

['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-'],

];

    config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html'; //上傳文件時瀏覽服務文件夾

    config.filebrowserUploadUrl = '../ckfinder/ckfinder.html'; //提供一個上傳的標簽

 // config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images'; //上傳圖片時瀏覽服務文件夾

   // config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?Type=Flash';  //上傳Flash時瀏覽服務文件夾

  //  config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上傳文件按鈕(標簽)

  //  config.filebrowserImageUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上傳圖片按鈕(標簽)

  //  config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上傳Flash按鈕(標簽)

};

 

PS:更詳細的配置在：http://docs.cksource.com/CKEditor_3.x/Developers_Guide

 

2011.06.17

在使用CKEditor過程中發現，從word粘貼文檔時，會導致文檔格式被清除

解決辦法：打開ckeditor\plugins\pastefromword\filter\default.js,查找 cleanWord ,連同這個字符前面的 CKEDITOR. 一起替換為如下:

Js代碼 

CKEDITOR.cleanWord=function(h,i){return h;if(CKEDITOR.env.gecko)h=h.replace(/(<!--\[if[^<]*?\])-->([\S\s]*?)<!--(\[endif\]-->)/gi,'$1$2$3');var j=new g(),k=j.dataFilter;k.addRules(CKEDITOR.plugins.pastefromword.getRules(i));i.fire('beforeCleanWord',{filter:k});try{h=j.toHtml(h,false);}catch(l){alert(i.lang.pastefromword.error);}h=h.replace(/cke:.*?".*?"/g,'');h=h.replace(/style=""/g,'');h=h.replace(/<span>/g,'');return h;};})(); 

 

 

2011.06.17:CKEditor 3.6.1

配置方法如前：

新增去除格式配飾：

CKEDITOR.editorConfig = function(config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

 

    config.language = "zh-cn"; //配置語言

    config.skin = "v2";  //皮膚選擇，skins文件夾下

    config.resize_enabled = false; //關閉自由拖動打下，默認為打開

    config.font_names = '宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;' + config.font_names;

    config.toolbar =

[

['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],

['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],

['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',

['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],

['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'],

['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',

['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-'],

];

    config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html'; //上傳文件時瀏覽服務文件夾

    config.filebrowserUploadUrl = '../ckfinder/ckfinder.html'; //提供一個上傳的標簽

 

    config.pasteFromWordRemoveStyle = false;  //是否強制去除word的樣式

    config.pasteFromWordRemoveFontStyles = false; //是否強制去除word的字體樣式

};

 

2011/9/9  添加行距

1. 在ThinksKing的Tools里面找到已經解壓好的”lineheight”插件.(如果沒有需要下載.)
2. 在目錄“\ckeditor\plugins”下copy插件到目錄“lineheight”
3. 然后對\ckeditor\config.js文件進行修改，即添加行距插件：

config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');

在config.toolbar中添加 lineheight 按鈕

 

二、CKFinder使用

1           在ThinksKing的Tools里面找到已經解壓好的ckfinder拷貝至項目中。（已經刪除_samples和_source文件，如果要繼續精簡，參見附錄2.）

2           CKFinder使用需要添加ckfinder.dll文件。

3           為CkEditor添加CKFinder功能。

3.1          頁面引用js，

<script src="ckfinder/ckfinder.js" type="text/javascript"></script>

3.2          在CKEditor的config中，配置filebrowserBrowseUrl和filebrowserUploadUrl等鏈接方式。

3.3          在ckfinder/config.ascx中，將CheckAuthentication配置為return true;（暫未考慮安全性）。

4           配置CKFinder

4.1          基本配置，在ckfinder/config.js中，配置如下：

 config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要寫成"~/ckfinder/..."或者"/ckfinder/..."

            config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

            config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

            config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

             config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';

             config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

    config.filebrowserWindowWidth = '800';  //“瀏覽服務器”彈出框的size設置

    config.filebrowserWindowHeight = '500';

4.2          .NET配置，在ckfinder/config.ascx用戶控件中，SetConfig為初始化配置.

    BaseUrl = "/ckfinder/userfiles/"; //文件存儲的基地址

PS：更詳細的配置在：http://docs.cksource.com/CKFinder_2.x/Developers_Guide/ASP.NET

 

 

 

附錄1

ckeditor 3.3.1精簡

  1、刪除_samples和_source文件夾,分別為示例文件和未壓縮源程序

  2、刪除lang文件夾下除zh-cn.js,en.js下的所有語言文件.根據需要刪除

  3、刪除根目錄下的changes.html(更新列表),install.html(安裝指向),license.html(使用許可).

  4、刪除skins目錄下不需要的皮膚.我一般用V2(簡單.朴素)  //如果只保留V2則必須在config.js中指定皮膚

  5、刪除根目錄下的ckeditor.asp、ckeditor.php、ckeditor_php4.php、ckeditor_php5.php(asp和php版的文件).

 

 

附錄2

kfinder精簡

1、刪除_samples和_source文件夾,分別為示例文件和未壓縮源程序

2、刪除根目錄下changelog.txt,install.txt,license.txt文件

3、1.x版的刪除core/lang目錄下除en.js,zh-cn.js的所有語言文件(根據條件刪除)，2.0的刪除lang和core/connector/aspx/lang目錄下除en.js,zh-cn.js的所有語言文件；help目錄除en外的其他目錄