CKEditor配置

网上的CKEditor配置一大堆，但看了之后按流程一步步操作，发现有的根本不行或者有的不完整，我根据自己的经历和参照别人的文档，记录下配置的过程和注意点，希望能给更多的人一些帮助，最后我会奉上我自己的demo，以供参考。

【第一步：下载CKEditor和CKFinder】

资源当然是在官网下载最让人放心，官网地址是：CKEditor（点击打开）

首先要明白一点：

CKEditor跟其他富文本编辑器一样，插入图片和flash也要求提供网络路径，上传本地图片是CKFind的功能，所以，你必须把两者都配置好，否则，跟你找的其他富文本编辑器没有太多区别。

到哪里下载CKEditor和CKFind呢？

点击进入官网：http://ckeditor.com/

点击Download链接，找到最新版的CKEditor，注意下载CKEditor for Asp.net的版本：

下载下来是个zip的包。

接着下载CKFind的包：CKFinder官网，注意下载asp.net的版本。

下载好后，会得到ckeditor_aspnet_3.6.4和ckfind2.3.1的压缩包。

【第二步：配置CKEditor】

解压第一步中下载的ckeditor的压缩包，会得到以下的结构目录：

打开_Samples文件夹，里面包含配置需要的所有文件，按照以下的步骤完成CKEditor的配置：

1. 添加引用：打开_Samples\bin目录，找到CKEditor.NET.dll，拷贝到你的项目中（最好在网站根目录新建一个专门存放第三方动态链接库文件的文件夹），然后添加引用。

2. 拷贝ckeditor：_Samples包含一个叫ckeditor的文件夹，它是富文本编辑器的一些样式、js和界面的包，需要拷贝到你的项目中，在引入项目之前，可以做适当的精简：

如果不需要支持除中英文外的其他语言，可以将lang文件夹下除了en和zh开始的js文件全部删除。皮肤有三种，根据喜好，可以删除另外两种，就在skins文件夹下（当然你肯定需要在配置好后，分别查看三种不同皮肤的效果，再做决定）。根目录下的 changes.html、install.html、license.html可以删掉。

3. 配置富文本编辑器的功能：在ckeditor文件夹下找到config.js，按照以下做一些配置：

[javascript]

/*
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.skin = 'kama'//kama,v2,office2003,皮肤设置
config.language = 'zh-cn'; //设置中文环境
config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //编辑字体设置
config.toolbar =
[
['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['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', '-', 'About']
];
//设置引用路径
config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html';
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';
};

/*
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.skin = 'kama'//kama,v2,office2003,皮肤设置
    config.language = 'zh-cn'; //设置中文环境
    config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //编辑字体设置
    config.toolbar =
    [
        ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['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', '-', 'About']
    ];

     //设置引用路径
    config.filebrowserBrowseUrl = '../ckfinder/ckfinder.html';
    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';
    
};

toolbar有两种内置的设置：

config.toolbar = "Basic"; config.toolbar = "Full"; 顾名思义，一种是包含最基本的按钮，一种是包含所有的功能按钮。

另外你还可以自定义配置，不需要的按钮，可以用'-'来替代（注：[]内的元素不是固定的，你可以把某个[]内的按键标识放到其他的[]中，如此修改，会在编辑器功能按钮的位置分布上体现出差别）。

设置引用路径是配置ckfinder的配置，一定要根据ckeditor和ckfinder放置的位置来设置。

【第三步：配置CKFinder】

下载到zip的包后，解压得到以下文件：

ckfinder\bin\Release\目录下找到CKFinder.dll，拷贝到你的网站中，并添加引用。

将整个ckfinder文件夹拷贝到你的网站中，注意第二步骤中，有针对ckfinder位置的配置，这里放置ckfinder时，留意与那个配置保持一致。

至此，ckeditor和ckfinder的配置基本ok了，接下来是如何在页面中使用ckeditor了。

【第四步：如何使用CKEditor】

首先，在你要使用富文本编辑器的页面，添加类型注册：

[html]

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

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

接着，引入两个js文件：

[html]

<scripttype="text/javascript"language="javascript"src="../ckfinder/ckfinder.js"></script>
<scripttype="text/javascript"language="javascript"src="../ckeditor/ckeditor.js"></script>

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

注意路径！

然后，添加控件：

[html] view plain copy print ?

<CKEditor:CKEditorControlID="CKEditor1"Width="95%"UIColor="#999999"Height="200px"runat="server"></CKEditor:CKEditorControl>

    <CKEditor:CKEditorControl ID="CKEditor1" Width="95%" UIColor="#999999" Height="200px" runat="server"></CKEditor:CKEditorControl>

这样，在后台就可以直接操作CKEditor1对象了，Text属性里面即是你想要的数据。

【配置时，所遇到的问题】

遇到过几个问题，没有截图，这里也没办法描述多详细，但是，我可以列出几个容易出现错误的地方：

1. 添加了ckeditor的引用，但是没有拷贝ckeditor的文件夹，导致，页面添加控件进来，显示的却是一个textarea。

2. 没有添加ckfinder的引用，会导致上传文件出错，而且ckfinder会把错误信息以网页的形式显示在上传文件的文本框内，很难发现错误信息。

3. ckeditor的config.js中，ckfinder的路径配置错误，会导致看不到上传的标签页，而无法上传本地图片。

项目Demo：

demo说明：网络原因明天发布，需要的留言

1.如果要上传图片，请在作用范围内加入“Session["IsAuthorized"] = true;”

2.上传的文件命名方式改为了以时间命名。

3.修改了编辑器的字体为12px，且去掉了图片预览的说明文字。

posted @ 2013-05-23 21:44 贺伟cc 阅读(497) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

叶子的翅膀

叶子的翅膀

CKEditor配置

公告