百度 UEditor Web 编辑器同 CMS 集成全攻略
UEditor 是由百度 Web 前端研发部开发的所见即所得富文本 Web 编辑器，拥有强大的前端编辑功能，集成了诸如在线地图，代码加亮，进度条上传等实用功能，同时支持大量的百度前端应用。锐商企业CMS是一款面向企业用户的网站内容管理系统，支持前端网站编辑模式（FrEE），在 UEditor 之前，其内置的内容编辑器为 TinyMCE，TinyMCE 的特点是干净，稳定，然而功能上略显单薄，UEditor 很大程度上弥补了 TinyMCE 的不足，对希望在网站中提供大量前端应用的用户来说， UEditor 是不错的选择。本文根据锐商企业 CMS 开发组在集成 UEditor 编辑器的工作中所记录的文档整理而成，期在帮助其他 CMS 开发者了解该编辑器详细的集成过程。
注：由于锐商企业CMS基于.NET，因此本文基于 Ueditor .NET 开发版，.NET, PHP, JSP 三个版本的区别在于图片，文件上传等功能的后台处理模块。UEditor .NET 开发版下载地址为：
UTF-8 版本 （V1.2.5.0）|GBK 版本 （V1.2.5.0）
在 CMS 产品中集成 UEditor 编辑器的步骤
- 在前端页面引用 UEditor 资源和库文件，并创建编辑器实例
- 对 UEditor 的配置文件进行更改
- UEditor 图片上传功能的后台集成
- UEditor 远程图片抓取功能的后台集成
- UEditor 图片集中管理功能的后台集成
- UEditor 图片编辑界面的定制
- UEditor 文件上传功能的后台集成
- UEditor 视频搜索功能的后台集成
在前端页面引用 UEditor 资源和库文件，并创建编辑器实例
- 下载 UEditor 最新版本，作为在 CMS 中的集成，应该下载与你的 CMS 开发语言相同的开发版本，锐商企业 CMS 基于 .NET，因此应该使用 UEditor .NET 版，如果你的 CMS 需要支持全语种，推荐使用 UTF-8 版。
- 将下载的文件解压到你的 CMS 产品目录，锐商企业 CMS 中 UEditor 部署路径是根路径下的 ueditor 目录。UEditor 的开发版解压后会包含很多很多目录，但真正需要的是以下内容： 目录：dialogs 目录：lang 目录：themes 目录：third-party 根目录下的文件：editor_all_min.js 根目录下的文件：editor_config.js注：UEditor 的主库文件是 editor_all.js，editor_all_min.js 是 editor_all.js 剔除了空白内容后的代码压缩版本，为了降低引用页面的尺寸，应当尽可能使用代码压缩版本。
- 在需要启用 UEditor 编辑器的页面中，加入以下引用代码（一般放在 head 内）： 注：这里假设 ueditor 目录位于网站根路径下。为了便于在任意路径下引用，尽可能使用绝对路径。
- 在页面中创建 UEditor 编辑器对象：UEditor 可以在 textarea 或 script 两种对象上创建编辑器实例，使用 script 对象创建编辑器实例的时候，需要将 script 的 type 属性设置为 text/plain，使用 script 对象的好处是，可以避免 textarea 自动进行的字符转义处理，不过，由于锐商企业CMS还集成了 TinyMCE 编辑器，为了兼顾两种编辑器，我们仍然使用 textarea 创建编辑器实例，具体方法如下（假设你的 textarea 对象的 id 属性为 text_content）： 这样，你页面中用来编辑内容的 teaxtarea 对象就会被 UEditor 编辑器取代，编辑器在编辑器过程中所产生的内容（HTML代码内容），会随时传给你的 textarea 对象以便发布到后台保存。
对 UEditor 的配置文件进行更改
在上面的 UEditor 引用中，我们曾引用过 editor_config.js 文件，该文件是 UEditor 的配置文件，UEditor 将配置变量放到一个独立的文件中，可以方便网站的最终管理者在CMS系统之外调整编辑器的表现和行为，当然，CMS开发方仍然可以在他们的页面中，调用配置文件中的变量，用他们的程序逻辑改变配置。在同CMS集成的过程中，最有可能用到以下配置变量（这些变量所指向的页面是锐商企业 CMS 为 UEditor 定制的后台处理模块）：- ,imageUrl:"/Admin/Resource/UEditorImageUpload.aspx" 这是图片上传的后台接收处理页面，该页面负责接收发布的图片，保存图片，并以 json 格式返回该图片的信息以便 UEditor 编辑器引用。
- ,fileUrl:"/Admin/Resource/UEditorFileUpload.aspx" 这是文件上传的后台接收处理页面，该页面负责接收发布的文件，保存文件，并以 json 格式返回该文件的相应信息以便 UEditor 编辑器引用。
- ,catcherUrl:"/Admin/Resource/UEditorGetRemoteImage.aspx" 打开远程图片抓取选项之后，该页面会将你插入的远程图片（非本站内部图片）下载到本站，以便 UEditor 以本站的地址进行引用，本功能用于图片插入对话框中“远程图片”和“图片搜索”两种情形。UEditorGetRemoteImage.aspx 是锐商企业CMS定制的，用来下载远程并保存远程图片到本站的一个处理页面，该页面最终会以 json 格式返回远程图片以及抓取到本站的图片的信息。注：要启用远程图片抓取功能，需要将配置文件中的 catchRemoteImageEnable 参数设置为 true。
- ,imageManagerUrl:"/Admin/Resource/UEditorImageManager.aspx" 在 UEditor 上传本地图片到你网站的后台以后，使用该页面对图片进行管理，返回网站后台图片存放区域的图片清单，以便 UEditor 引用。
- ,wordImageUrl:"/Admin/Resource/UEditorImageUpload.aspx" 该页面和前面的图片上传后台处理页面是同一个页面，当你复制粘贴 Word 中的图文内容到编辑器的时候，正常情况下，网页是无法显示 Word 中的本地图片的，UEditor 可以将 Word 中使用的本地图片上传到站点后台，用上传后的在线图片替换 Word 内容中的本地图片。
- ,getMovieUrl:"/Admin/Resource/UEditorGetMovie.aspx" 该参数指定的后台页面，用来按给定的关键词，搜索土豆视频，并返回搜索结果到 UEditor 编辑器。
- toolbars 该变量用来定制 UEditor 编辑器的按钮，不同按钮以英文逗号“,”间隔，可以用 “|” 字符为不同的按钮分组，假如你要将按钮人为地分布到不同的行，可以用“[]”将同一行的按钮括起来，不同行之间要以英文逗号“,”间隔。
- webAppKey 你可以到开发者中心，注册一个开发者账户，然后，申请一个 webAppKey，放到这里，只有设置了 webAppKey，才可以在你的站点中插入百度应用。申请 webAppKey 的步骤请参考http://app.baidu.com/static/cms/getapikey.html。
- zIndex 根据你的 CMS 中页面内容的布局，调整 UEditor 对象的 z-index 值，可以防止你页面既有的对象遮挡 UEditor 编辑器。
UEditor 图片上传功能的后台集成
UEditor 按上面的步骤部署之后，绝大部分功能已经可以直接使用，但诸如图片，文件上传之类的功能，还需要相应的后台模块支持，以接收，保存上传的文件，并返回上传文件的信息供 UEditor 调用。UEditor 的图片上传界面包含远程图片，本地上传，在线管理，图片搜索 4 个选项卡，本节涉及的是图片本地上传的后台接收与处理。 UEditor 图片本地上传使用的是一个支持进度条的 Flash 组件，该组件浏览本地电脑，选中你要上传的图片后，在上传界面上显示该图片的缩略图，并在缩略图下方显示一个图片描述文本框，用户可以在这里输入图片描述，点击“开始上传”按钮后，图片数据以及描述内容被发布到后台，发布到哪里呢？就是 UEditor 配置文件（editor_config.js）中 imageUrl 变量所指的地址，就锐商企业 CMS 而言，是 /Admin/Resource 路径下的 UEditorImageUpload.aspx 页面，该页面中后台处理逻辑会接收发布来到图片数据，保存图片，并返回图片的相应信息。下面看看 UEditorImageUpload.aspx 是如何做的： 1. 接收并保存发布上来的图片文件 在 .NET 中，接收发布文件的典型方法如下：HttpFileCollection myHttpFileCollection=HttpContext.Current.Request.Files;
HttpPostedFile myHttpPostedFile=null;
if (myHttpFileCollection!=null)
{
if (myHttpFileCollection.Count>0)
{
if (myHttpFileCollection[0].ContentLength>0 && myHttpFileCollection[0].FileName!="")
{
myHttpPostedFile=myHttpFileCollection[0];
}
else
{
myHttpPostedFile=null;
}
}
else
{
myHttpPostedFile=null;
}
}
else
{
myHttpPostedFile=null;
}
锐商企业 CMS 将所有随机上传上来的文件保存在 /Writable/Resource/_Random_ 路径下以当前日期命名的文件夹中，我们来构造这个文件夹的名字：
string myStringDirectory=
HttpContext.Current.Server.MapPath(
String.Format("/writable/resource/_random_/{0:####}-{1:0#}-{2:0#}",
DateTime.Today.Year,DateTime.Today.Month,DateTime.Today.Day));
接着构造即将保存的图片文件的名字：
string myStringPath=
String.Format(@"{0}{1}",myStringDirectory, Path.GetFileName(myHttpPostedFile.FileName));
最后保存发布上来的图片文件
myHttpPostedFile.SaveAs(myStringPath);2. 返回图片信息 UEditor 图片上传组件需要后台以 json 格式返回以下 4 个信息：
- url ： 上面步骤 1 中，所保存的图片文件的逻辑路径。
- title ： UEditor 本地图片上传界面中填写的图片描述文字，图片描述文字输入文本框的名字为 "pictitle"，因此可以使用 HttpContext.Current.Request.Form["pictitle"] 获取发布的图片描述。
- original ： 上面步骤 1 中，文件保存后的完整物理路径。
- state ： 上面步骤 1 中，文件保存成功与否，成功则使用 "SUCCESS" 字符串，失败则使用 "ERROR"。
string myStringJson=
string.Format("{{'url':'{0}','title':'{1}','original':'{2}','state':'{3}'}}",
myStringUrl,myStringTitle,myStringOriginal,myStringState);
最后，返回上述 json 数据，返回的 json 数据会告诉 UEditor 刚才上传的图片的必要信息，供 UEditor 在编辑器中引用图片用。
Response.ContentType = "text/plain"; Response.Write(myStringJson);代码下载 UEditor 图片上传功能的后台集成代码 代码中用到一个 RandomResourceSave 类，该类中的代码和上面的“接收并保存发布上来的图片文件”中所讲的代码是一样的，你可以自己用那些代码替代该类的工作。
UEditor 远程图片抓取功能的后台集成
UEditor 的图片编辑界面，除了上面说的本地图片上传功能外，还可以直接提供远程图片的地址，或者从网络中搜索远程图片，编辑器可以直接插入远程图片，也可以将远程图片下载到本站后台再引用，后者需要相应的后台处理程序。锐商企业 CMS 使用 /Admin/Resource 路径下的 UEditorGetRemoteImage.aspx 页处理远程图片的下载与返回，也就是 editor_config.js 配置文件中的 catcherUrl 变量所指的地址。 注：要启用远程图片抓取功能，需要将配置文件（editor_config.js）中的 catchRemoteImageEnable 参数设置为 true。 1. 首先获取需要下载回本站的远程图片的 Url 地址 UEditor 图片编辑界面，对于远程图片，会通过一个名字为 upfile 的表单控件将你输入的或选中的远程图片发布到后台，你可以用这样的代码捕获远程图片地址列表：string myStringRemoteImageUrl = HttpContext.Current.Server.HtmlEncode( HttpContext.Current.Request["upfile"]);在远程图片搜索界面，由于你可能同时选中多个搜索结果，UEditor 使用 “ue_separate_ue” 字符串分隔分隔各个图片地址（该字符串可以在配置文件中通过 separater 变量设置，默认为 “ue_separate_ue”），你可以在后台通过下面代码将发布来的远程图片地址转成数组：
string[] myArrayStringRemoteImageUrl= Regex.Split(myStringRemoteImageUrl, "ue_separate_ue", RegexOptions.IgnoreCase);2. 对数组中的每个远程图片文件，使用 .NET 的 WebClient 组件下载到本地站点后台
for (int i = 0; i <= myArrayStringRemoteImageUrl.Length-1; i++)
{
myStringCurrentRemoteImageUrl =
myArrayStringRemoteImageUrl[i];
WebClient myWebClient=new WebClient();
myWebClient.DownloadFile(...);
}
3. 以 json 格式返回被下载回本站后台的图片地址列表（及其它信息）
myStringReturnImageList=
string.Format("{{url:'{0}',tip:'success!',srcUrl:'{1}'}}",
this.ConverToString(myArrayListTempName),myStringRemoteImageUrl);
Response.ContentType = "text/plain";
Response.Write(myStringReturnImageList);
代码下载
UEditor 远程图片抓取功能的后台集成代码
UEditor 图片集中管理功能的后台集成
UEditor 图片编辑界面，本地上传，远程图片，以及图片搜索三个选项卡中的功能的后台处理模块前面已经讲完，最后一个功能是在线管理，也就是从本站后台资源库获取图片资源列表供 UEditor 引用，这个功能相对简单，无非是从指定的后台图片资源路径读出所有图片清单，构造成以 ue_separate_ue 字符串分隔的清单返回。该功能的后台集成地址由配置文件中的 imageManagerUrl 变量指定，在锐商企业 CMS 中，该页面是 /Admin/Resource 路径下的 UEditorImageManager.aspx 页。看看该页是如何处理的： 1. 收集后台图片资源路径下的所有图片地址DirectoryInfo myDirectoryInfoRandomResource=
new DirectoryInfo(HttpContext.Current.Server.MapPath(
myStringRandomResourceLogicalPath));
foreach (DirectoryInfo myDirectoryInfo in
myDirectoryInfoRandomResource.GetDirectories())
{
myStringBuilderReturnImageList.AppendFormat(
"{0}{1}/{2}ue_separate_ue",
myStringRandomResourceLogicalPath,
myDirectoryInfo.Name,myFileInfo.Name);
}
2. 返回图片列表
Response.ContentType = "text/plain"; Response.Write(myStringBuilderReturnImageList.ToString());代码下载 UEditor 图片集中管理功能的后台集成代码 注：UEditor 图片后台集成管理目前存在的问题是，返回的后台图片集没有分页机制，如果后台资源库中的图片数量庞大，势必带来性能问题。
UEditor 图片编辑界面的定制
锐商企业 CMS 为 UEditor 编辑器定制了两种模式，完整模式和简化模式，完整模式提供完整功能，用于页面内容的编辑，简化模式提供安全的，简化的功能，用于论坛，留言等场合，对 UEditor 的图片编辑功能而言，在简化模式，隐藏了本地上传和图片管理两个选项卡中的功能。为此，锐商企业 CMS 提供了两个版本的 editor_config.js 配置文件，在不同的场合加载，在正常模式，配置文件为 editor_config.js，在简化模式中，配置文件为editor_config_simple.js，在简化模式中，imageUrl 参数被设置为空。 锐商企业 CMS 接着对 /dialogs/image 路径下的 image.html 文件做了定制，在 tabHeads 这个 div 中的 4 个选项卡 span 中，分别设置了 t_remote， t_local， t_imgManager， t_imgSearch 四个 id，以方便它们后面被 document.getElementById 引用。在本文件最后的 script 中，加入了以下代码以隐藏图片上传和在线管理功能选项卡：if (editor.options.imageUrl.length==0)
{
document.getElementById("t_local").style.display="none";
document.getElementById("local").style.display="none";
document.getElementById("t_imgManager").style.display="none";
document.getElementById("imgManager").style.display="none";
document.getElementById("t_remote").className="focus";
}
代码下载
UEditor 图片编辑界面的定制代码
UEditor 文件上传功能的后台集成
UEditor 上传文件的机理和图片上传相似，需要的后台集成模块也是先接收发布的文件数据，然后以 json 格式返回文件的相应信息。文件上传的后台处理页面地址由配置文件中的 fileUrl 变量指定，在锐商企业 CMS 中，是 /Admin/Resource 路径下的 UEditorFileUpload.aspx 文件。我们看看 UEditorFileUpload.aspx 是如何做的： 1. 接收并保存发布上来的文件 这部分和接收保存发布上来的图片（UEditorImageUpload.aspx）的处理方法完全一样。 2. 返回文件信息 UEditor 文件上传组件需要后台以 json 格式返回以下 4 个信息（和图片上传组件不同的是 fileType 参数，图片上传组件对应的是 title 参数）：- url ： 上面步骤 1 中，所保存的文件的逻辑路径。
- fileType ： 该文件的格式后缀。
- original ： 上面步骤 1 中，文件保存后的完整物理路径。
- state ： 上面步骤 1 中，文件保存成功与否，成功则使用 "SUCCESS" 字符串，失败则使用 "ERROR"。
string myStringJson=
string.Format("{{'url':'{0}','fileType':'{1}','original':'{2}','state':'{3}'}}",
myStringUrl,myStringFileType,myStringOriginal,myStringState);
最后，返回上述 json 数据，返回的 json 数据会告诉 UEditor 刚才上传的图片的必要信息，供 UEditor 在编辑器中引用图片用。
Response.ContentType = "text/plain"; Response.Write(myStringJson);3. 解决 session 丢失问题 和图片上传不同的是，在非 IE 内核的浏览器中，文件上传组件会丢失当前页的 session 信息，保存在 cookie 中的登录信息无法传递到后台处理页面，导致登录失效。锐商企业 CMS 的解决方法是，在 /dialogs/attachment/attachment.html 中，使用 JavaScript 读取保存在 cookie 中的 AuthenticationTicket，通过 post_params 传递给后台处理页面，后台处理页面将传递过来的 AuthenticationTicket 信息重新还原成 cookie 保存，相当于将登录 cookie 曲折地传递过来。 在 attachment.html 中，找到 在它的后面，加上以下代码 这段代码引用锐商企业 CMS 的基础 JavaScript 库 （CommonJavaScript.js），里面有 GetCookie() 函数，你也可以自己写一个 GetCookie() 函数放到 attachment.html 文件供引用，GetCookie 函数的代码如下：
function GetCookie(name)
{
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0)
{
begin = dc.indexOf(cname);
if (begin != -1)
{
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
然后，在 attachment.html 中找到
post_params:{"PHPSESSID":"<?php echo session_id(); ?>"},
将其修改为
post_params:{"AuthenticationTicket":GetCookie("AuthenticationTicket")},
最后，需要在 UEditorFileUpload.aspx 中捕获这个发布过来的 AuthenticationTicket 参数，将其还原成 cookie：
HttpRequest myHttpRequest=
HttpContext.Current.Request;
string myStringAuthenticationTicket=
myHttpRequest.Form["AuthenticationTicket"];
HttpCookie myHttpCookie=
new HttpCookie("AuthenticationTicket",myStringAuthenticationTicket);
myHttpCookie.Expires=
DateTime.Now.AddMinutes(480);
myHttpRequest.Cookies.Set(myHttpCookie);
以上代码需要放在 aspx 文件的 load 事件之前。
代码下载
对 attachment.html 文件的定制
UEditor 文件上传功能的后台集成代码
UEditor 视频搜索功能的后台集成
视频搜索功能事实上是利用视频网站 tudou 的 api，对 tudou 进行搜索，并返回搜索结果给 UEditor 引用。该功能的后台集成地址由配置文件中的 getMovieUrl 变量所指的页，在锐商企业 CMS 中，是 /Admin/Resource 路径下的 UEditorGetMovie.aspx 页。看看该页是如何处理的： 1. 截获 UEditor 视频编辑界面发布来的搜索关键词和搜索类型string myStringSearchKey = HttpContext.Current.Server.HtmlEncode( HttpContext.Current.Request["searchKey"]); string myStringVideoType = HttpContext.Current.Server.HtmlEncode( HttpContext.Current.Request["videoType"]);2. 土豆 api 地址
Uri myUriTudouSearch =
new Uri(string.Format("http://api.tudou.com/v3/gw?method=item.search
&appKey=myKey&format=json&kw={0}&pageNo=1&pageSize=20&channelId={1}
&inDays=7&media=v&sort=s",myStringSearchKey,myStringVideoType));
3. 使用 WebClient 组件访问土豆 api
WebClient myWebClient = new WebClient(); Byte[] myArrayBytePageData = myWebClient.DownloadData(myUriTudouSearch.ToString()); myString=Encoding.UTF8.GetString(myArrayBytePageData);4. 返回结果
Response.ContentType = "text/plain"; Response.Write(myString);代码下载 UEditor 视频搜索功能的后台集成代码 注：不知是否土豆 api 的问题，目前视频搜索功能返回的结果十分有限，很多关键词的搜索都没有任何结果返回。
结束语
假如不考虑图片，文件上传等功能后台集成，UEditor 同任何 CMS 的集成都可以简单到几行代码，无非就是在页面中加入对 UEditor 资源和库文件的引用，然后通过 UEditor 实例对象的 render 方法，将编辑器渲染到页面中的 textarea 或 javascript 对象上。如果要实现图片和文件上传等功能，则需要在你的 CMS 后台设计相应的处理模块，对 UEditor 编辑器界面发布过来的图片或文件数据进行处理，并将文件信息返回编辑器界面供引用。锐商企业 CMS 实现了对 UEditor 绝大多数功能的后台集成，希望上面的集成过程可以对所有 CMS 开发商有所帮助。
Follow me: https://github.com/zce
