免费开源百度编辑器(UEditor)使用方法

UEditor效果图

在富文本编辑器的选择上，UEditor算是国内开发者圈子里的一个老朋友了。作为百度前端团队开源的产物，它轻量、可定制，且基于BSD协议，用起来没什么版权包袱。如果你正在为项目物色一个体验不错的编辑器，它值得一看。

一、简介

UEditor，全称“UEditor”，是一款开源的所见即所得富文本编辑器。它由百度Web前端研发部打造，主打轻量级和良好的用户体验。由于采用BSD开源协议，不管是个人项目还是商业应用，都可以自由地使用甚至修改它的代码。

二、下载地址

官方下载页面：
http://ueditor.baidu.com/website/download.html

从官网拿到完整源码包后，解压到任意目录，你会看到这样一个结构：

_examples：编辑器完整版的示例页面
dialogs：弹出对话框对应的资源和JS文件
themes：样式图片和样式文件
php/jsp/.net：后端适配文件，取决于你选的语言版本
third-party：第三方插件，比如代码高亮、源码编辑等
editor_all.js：所有源文件的打包
editor_all_min.js：打包文件的压缩版，适合正式部署
editor_config.js：核心配置文件，建议和编辑器实例化页面放在同一目录

当然，直接在网上下载别人已经配置好的集成包也是个省心办法。毕竟自己动手折腾的话，一旦卡住，确实很消磨耐心。

当时我下载的是开发版 [1.2.5.1 .Net 版本]，2013年4月27日发布的那个版本，算是当时的最新版本。

三、部署方法

代码结构图

部署听起来复杂，其实步骤很清晰：

第一步： 在项目的任意目录下，新建一个文件夹用于存放UEditor资源。比如在根目录下创建 ueditor 文件夹，名字可以按喜好来。

第二步： 把源码包里的 dialogs、themes、third-party、editor_all.js 和 editor_config.js 复制到这个 ueditor 文件夹里。其余文件则按需用于具体项目。

第三步： 为了演示方便，我们以根目录下的 index.php 页面作为编辑器实例化页面。首先，在页面中引入三个核心文件，代码如下：

第四步： 在 index.php 中创建编辑器的DOM容器并实例化编辑器：

这里写你的初始化内容

最后一步： 打开 /UETest/ueditor/editor_config.js，找到 URL 变量，配置成你项目中的实际路径：

// 强烈推荐使用相对于网站根目录的绝对路径
URL = window.UEDITOR_HOME_URL || "/UETest/ueditor/";

到此，一个完整的UEditor实例就部署成功了。打开浏览器输入 http://localhost/UETest，看看效果吧。

四、注意事项

几个关键点值得留意：

1. 引用 editor_config.js 时，务必放在 editor_all.js 前面加载，否则在某些条件下可能报错。

2. 如果想给编辑器预设初始内容，可以参考_examples目录下的示例代码，或者直接查阅官方文档。

3. 编辑器资源文件的根路径配置是容易踩坑的地方。它指的是以当前实例化页面为基准，指向编辑器资源文件（比如dialog等文件夹）的路径。最稳妥的做法是使用“相对于网站根目录的相对路径”，也就是以斜杠开头的路径，例如 /UETest/ueditor/。如果使用类似 ueditor/ 这样的相对路径，当站点中不同层级的页面引用同一编辑器时，路径很可能不一致。这时，可以在需要实例化编辑器的页面顶部，单独指定根路径：

window.UEDITOR_HOME_URL = "/xxxx/xxxx/";

比如，按照上面的目录结构，在 index.aspx 页面使用编辑器时，editor_config.js 中的 var URL 就应设置为 var URL = "/UETest/ueditor/"。

五、常见问题

1. 乱码
如果编辑器成功运行但出现乱码，先检查一下编码是否一致。有人遇到过这种情况：下载的是UTF-8版本，但运行时乱码，后来发现是引用的脚本里带的编码声明和meta标签冲突了。解决方法很简单，把脚本中的 charset="utf-8" 去掉再试试。

2. 上传图片出错
上传图片时出现红色叉叉，或者上传到一半就卡住？可以尝试删除 net 文件夹（如果是PHP则对应 php，JSP对应 jsp）下的 web.config 文件。原因在于这个文件默认使用了.NET 4.0的配置，如果项目运行在3.5或更低版本的环境下，就会出问题。删除它不会影响其他功能。

六、最后，附上我的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" %>