CKEditor和CKFind 使用配置常见配置问题的解决办法 CKEditor Demo（Asp.net）

最新推荐文章于 2022-12-13 22:31:15 发布

Lisliefor

最新推荐文章于 2022-12-13 22:31:15 发布

阅读量8.8k

点赞数 1

分类专栏： Asp.net JavaScript与流行JS框架文章标签： asp.net 文本编辑 licensing javascript flash assembly

本文链接：https://blog.csdn.net/lisliefor/article/details/6745269

版权

Asp.net 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript与流行JS框架

29 篇文章 0 订阅

订阅专栏

最近的一个项目有新闻模块，需要一个支持图文混排的富文本编辑器，支持asp.net，并要求图片能从本地上传。

到网上找了下，有不少做得简洁的js富文本编辑器，但是，插入图片时，需要提供网络图片的路径，这就要求将要使用的图片先上传至一个支持外联的相册，这显然是客户所不能接受的，后来，从网友的blog中，找到了CKEditor(点我浏览官网demo)，研究下，发现它配置好CKFind后，能满足我这些需求，经过一些配置与调试，将环境搭了起来，我把其中摸索的弯路去掉了，整理出一个简单的配置流程和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.1和ckfind的压缩包。

【第二步：配置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，按照以下做一些配置：

/*
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】

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

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

接着，引入两个js文件：

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

注意路径！

然后，添加控件：

    <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的路径配置错误，会导致看不到上传的标签页，而无法上传本地图片。

总结：总的来说，配置不复杂，东西好用，易上手，最后附几篇其他写得比较清晰的ckeditor相关配置的blog：

Asp.net 中配置 CKEditor和CKFinder

ckeditor与ckfinder的中国本地化改造

Lisliefor

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CKEditor和CKFind 使用配置常见配置问题的解决办法 CKEditor Demo（Asp.net）

最近的一个项目有新闻模块，需要一个支持图文混排的富文本编辑器，支持asp.net，并要求图片能从本地上传。到网上找了下，有不少做得简洁的js富文本编辑器，但是，插入图片时，需要提供网络图片的路径，这就要求将要使用的图片先上传至一个支持外联的相册，这显然是客户所不能
复制链接

扫一扫