Ueditor和CKeditor 两款编辑器的使用与配置方法

先摆出几个核心判断。市面上富文本编辑器不少，但真正在国内开发者中形成“纠结”的，其实就那么两款：Ueditor（百度编辑器）和CKEditor（及其配套的CKFinder）。这篇文章直接把它们摊开来讲，怎么配置、怎么用、有哪些坑，一次性说明白。

一、Ueditor 百度编辑器

Ueditor，由百度web前端研发部开发，是一款所见即所得的富文本web编辑器。其核心优势概括起来就三个词：轻量、可定制、注重用户体验。官方文档、演示和下载地址很直接，想了解基础信息，直接去官网看就行。

那么，如果想定制自己想要的功能，该怎么做？很简单，去官方网站的下载页面，那里有详尽的配置选项。不过，这里先展示一下编辑器长什么样：

百度编辑器配置详解

配置Ueditor，其实就几步路，但每一步都有关键点。

1. 载入必要的文件
首先，把js和css文件引进来：

2. 页面配置
接下来，在页面里放一个容器，然后通过js渲染它：

  // 这个div的id就是关键，甚至可以是asp.net控件，只要id正确

3. 路径配置
这是最容易出问题的一步。在editor_config.js文件中，有一个路径配置需要特别注意：

var tmp = window.location.pathname;
URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/";
// 这里可以配置成ueditor目录在网站的相对路径或者绝对路径

这个路径指向的是你存放Ueditor的目录，配置错了，编辑器就加载不出来。

4. 图片上传功能配置
这一点，必须警惕。如果你想使用传图片功能，需要修改net文件夹下的几个文件。这里有一个常见的“坑”：默认路径可能有问题，需要手动调整。

改为→

同理，将net文件夹下其他文件类似的错误更正后，上传功能就正常了。注意，图片上传默认存放位置就在net文件夹下，上传一张图后，你会发现一个upload文件夹自动生成了。

5. 默认配置调整
Ueditor的很多默认配置都在editor_config.js这个文件中。细心看一遍，开启或关闭其中某些配置，能解决很多莫名其妙的问题。这算是一个隐藏技巧。

6. 页面布局兼容性问题
使用过程中，我还遇到过编辑器内容影响整体页面布局的情况。这个问题出在editor_all.js文件里，它内置了默认的样式。比如，选中的td样式、表格默认样式、分页符样式、锚点样式，甚至包括body的默认字体和字号都在这里定义。如果遇到布局错乱，不妨从这里入手修改。

// 在render方法中，包含了一系列默认样式
// 例如：body{margin:8px;font-family:'宋体';font-size:16px;}
// 这些样式会影响页面整体，必要时要覆盖或调整

总结一下Ueditor: 很好用，代码易读，便于修改配置，能定制出符合自己需求的编辑器。

二、CKEditor、CKFinder 国外知名编辑器

再来说说CKEditor。这是一款专门用于网页的开源所见即所得文字编辑器，全球范围内使用广泛。它的宗旨是轻量化，安装步骤相当简单。

官方文档、演示和下载地址同样可以直接访问。先看看它长什么样：

配置步骤以及一些常用配置

1. 引入核心文件
同样，先引入js文件：

2. 页面代码
CKEditor提供了两种常见的调用方式，一种是直接替换textarea，另一种是动态渲染到指定容器：

3. 常用配置
所有配置都在config.js文件中。官方API文档很详细，这里列出几个最常用的配置项：

CKEDITOR.editorConfig = function( config ){
    // 设置宽度和高度
    // config.width = 700;
    // config.height = 400;

    // 更换皮肤，自带的有Kama（默认）、Office 2003、v2
    // config.skin = 'v2';

    // 配置字体列表
    // config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';

    // 配置上传图片路径，需要配合CKFinder
    var ckfinderPath = "/SomePackage/FCKeditor/ckfinder";
    config.filebrowserBrowseUrl = ckfinderPath + "/ckfinder.html";
    config.filebrowserImageBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Image";
    config.filebrowserFlashBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Flash";
    config.filebrowserUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files";
    config.filebrowserImageUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images";
    config.filebrowserFlashUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash";
};

4. 上传图片的配置重点
如果要用上传功能，项目中必须添加CKFinder文件。CKFinder本身不是免费的，默认情况下，上传页面会有红色广告提示，虽然不影响使用，但总归有点碍眼。

5. 去除广告
去广告的方法很简单：找到ckfinder/core/js/ckfinder_ie.js和ckfinder_gecko.js这两个文件，将里面的en.call(window,qo);这一行代码删掉即可。

6. 安全配置
最后，需要修改CKFinder文件夹下的config.ascx文件。这里有一个重要的安全建议：不要直接返回true，最好做一下用户验证判断，确保安全。

public override bool CheckAuthentication()
{
    // 不建议直接返回true，最好做下用户验证
    // object str = session["username"];
    // if (str != null && Convert.ToBoolean(str) == true)
    // {
    //     return true;
    // }
    return true;  // 这只是示例，生产环境务必加上验证
}

总结一下CKEditor: 很强大，很好用，世界各地都在用。配置灵活，配合CKFinder后，文件上传功能也很完善。