插件帮助文档 --- 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。

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

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

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文件，配置如下：

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(/(([\S\s]*?))/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 添加行距

在ThinksKing的Tools里面找到已经解压好的”lineheight”插件.(如果没有需要下载.)
在目录“\ckeditor\plugins”下copy插件到目录“lineheight”
然后对\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，

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外的其他目录

posted @ 2012-02-15 16:38 idoku 阅读(3891) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

C#伊甸园

学习.net、深入C#的使徒新浪微博：http://weibo.com/kulong995

插件帮助文档 --- CKEditor&CKFinder

公告

C#伊甸园

学习.net、深入C#的使徒 新浪微博：http://weibo.com/kulong995

插件帮助文档 --- CKEditor&CKFinder

公告

学习.net、深入C#的使徒新浪微博：http://weibo.com/kulong995