Fork me on GitHub

插件帮助文档 --- 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外的其他目录

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