百度 UEditor Web 编辑器同 CMS 集作成攻略

百度 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 编辑器的步骤

1. 在前端页面引用 UEditor 资源和库文件，并创建编辑器实例
2. 对 UEditor 的配置文件进行更改
3. UEditor 图片上传功能的后台集成
4. UEditor 远程图片抓取功能的后台集成
5. UEditor 图片集中管理功能的后台集成
6. UEditor 图片编辑界面的定制
7. UEditor 文件上传功能的后台集成
8. UEditor 视频搜索功能的后台集成

在前端页面引用 UEditor 资源和库文件，并创建编辑器实例

1. 下载 UEditor 最新版本，作为在 CMS 中的集成，应该下载与你的 CMS 开发语言相同的开发版本，锐商企业 CMS 基于 .NET，因此应该使用 UEditor .NET 版，如果你的 CMS 需要支持全语种，推荐使用 UTF-8 版。
2. 将下载的文件解压到你的 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 剔除了空白内容后的代码压缩版本，为了降低引用页面的尺寸，应当尽可能使用代码压缩版本。

3. 在需要启用 UEditor 编辑器的页面中，加入以下引用代码（一般放在 head 内）：
   

   注：这里假设 ueditor 目录位于网站根路径下。为了便于在任意路径下引用，尽可能使用绝对路径。

4. 在页面中创建 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 编辑器。

除了上面的 6 个参数，UEditor 同 CMS 集成的过程中，还可能用到以下变量：

• toolbars
  该变量用来定制 UEditor 编辑器的按钮，不同按钮以英文逗号“,”间隔，可以用 “|” 字符为不同的按钮分组，假如你要将按钮人为地分布到不同的行，可以用“[]”将同一行的按钮括起来，不同行之间要以英文逗号“,”间隔。
• webAppKey
  你可以到开发者中心，注册一个开发者账户，然后，申请一个 webAppKey，放到这里，只有设置了 webAppKey，才可以在你的站点中插入百度应用。申请 webAppKey 的步骤请参考 http://app.baidu.com/static/cms/getapikey.html。
• zIndex
  根据你的 CMS 中页面内容的布局，调整 UEditor 对象的 z-index 值，可以防止你页面既有的对象遮挡 UEditor 编辑器。

以上是在 CMS 中集成 UEditor 编辑器过程中最可能用到的配置参数，你还可以定制多个版本的 editor_config.js，在不同场合加载，以便在不同场合加载不同风格的编辑器，比如，在网页内容编辑界面，加载完整版编辑器（示例），在论坛或留言界面，加载简化版编辑器（示例），只提供少量的安全编辑功能。

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"。

现在构造返回的 json 数据：

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"。

现在构造返回的 json 数据：

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 开发商有所帮助。

本文来源：锐商企业 CMS 官方网站，由锐商企业 CMS 开发组编写。