百度 UEditor Web 编辑器同 CMS 集成全攻略
2013-03-13 04:31
381 查看
| 注：由于锐商企业CMS基于.NET，因此本文基于Ueditor.NET开发版，.NET,PHP,JSP三个版本的区别在于图片，文件上传等功能的后台处理模块。UEditor.NET开发版下载地址为： |
在CMS产品中集成UEditor编辑器的步骤
在前端页面引用UEditor资源和库文件，并创建编辑器实例对UEditor的配置文件进行更改
UEditor图片上传功能的后台集成
UEditor远程图片抓取功能的后台集成
UEditor图片集中管理功能的后台集成
UEditor图片编辑界面的定制
UEditor文件上传功能的后台集成
UEditor视频搜索功能的后台集成
在前端页面引用UEditor资源和库文件，并创建编辑器实例
下载UEditor最新版本，作为在CMS中的集成，应该下载与你的CMS开发语言相同的将下载的文件解压到你的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目录位于网站根路径下。为了便于在任意路径下引用，尽可能使用绝对路径。 |
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。 |
在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的步骤请参考
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中，接收发布文件的典型方法如下：
HttpFileCollectionmyHttpFileCollection=HttpContext.Current.Request.Files;
HttpPostedFilemyHttpPostedFile=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_路径下以当前日期命名的文件夹中，我们来构造这个文件夹的名字：
stringmyStringDirectory=
HttpContext.Current.Server.MapPath(
String.Format("/writable/resource/_random_/{0:####}-{1:0#}-{2:0#}",
DateTime.Today.Year,DateTime.Today.Month,DateTime.Today.Day));
接着构造即将保存的图片文件的名字：
stringmyStringPath=
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数据：
stringmyStringJson=
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);
代码下载
代码中用到一个RandomResourceSave类，该类中的代码和上面的“接收并保存发布上来的图片文件”中所讲的代码是一样的，你可以自己用那些代码替代该类的工作。
UEditor远程图片抓取功能的后台集成
UEditor的图片编辑界面，除了上面说的本地图片上传功能外，还可以直接提供远程图片的地址，或者从网络中搜索远程图片，编辑器可以直接插入远程图片，也可以将远程图片下载到本站后台再引用，后者需要相应的后台处理程序。锐商企业CMS使用/Admin/Resource路径下的UEditorGetRemoteImage.aspx页处理远程图片的下载与返回，也就是editor_config.js配置文件中的catcherUrl变量所指的地址。
| 注：要启用远程图片抓取功能，需要将配置文件（editor_config.js）中的catchRemoteImageEnable参数设置为true。 |
UEditor图片编辑界面，对于远程图片，会通过一个名字为upfile的表单控件将你输入的或选中的远程图片发布到后台，你可以用这样的代码捕获远程图片地址列表：
stringmyStringRemoteImageUrl=
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(inti=0;i<=myArrayStringRemoteImageUrl.Length-1;i++)
{
myStringCurrentRemoteImageUrl=
myArrayStringRemoteImageUrl[i];
WebClientmyWebClient=newWebClient();
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引用，这个功能相对简单，无非是从指定的后台图片资源路径读出所有图片清单，构造成以ue_separate_ue字符串分隔的清单返回。该功能的后台集成地址由配置文件中的imageManagerUrl变量指定，在锐商企业CMS中，该页面是/Admin/Resource路径下的UEditorImageManager.aspx页。看看该页是如何处理的：
1.收集后台图片资源路径下的所有图片地址
DirectoryInfomyDirectoryInfoRandomResource=
newDirectoryInfo(HttpContext.Current.Server.MapPath(
myStringRandomResourceLogicalPath));
foreach(DirectoryInfomyDirectoryInfoin
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图片编辑界面的定制
锐商企业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上传文件的机理和图片上传相似，需要的后台集成模块也是先接收发布的文件数据，然后以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数据：
stringmyStringJson=
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函数的代码如下：
functionGetCookie(name)
{
varcname=name+"=";
vardc=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;
returnunescape(dc.substring(begin,end));
}
}
returnnull;
}
然后，在attachment.html中找到
post_params:{"PHPSESSID":"<?phpechosession_id();?>"},将其修改为
post_params:{"AuthenticationTicket":GetCookie("AuthenticationTicket")},最后，需要在UEditorFileUpload.aspx中捕获这个发布过来的AuthenticationTicket参数，将其还原成cookie：
HttpRequestmyHttpRequest=
HttpContext.Current.Request;
stringmyStringAuthenticationTicket=
myHttpRequest.Form["AuthenticationTicket"];
HttpCookiemyHttpCookie=
newHttpCookie("AuthenticationTicket",myStringAuthenticationTicket);
myHttpCookie.Expires=
DateTime.Now.AddMinutes(480);
myHttpRequest.Cookies.Set(myHttpCookie);
以上代码需要放在aspx文件的load事件之前。
代码下载
UEditor视频搜索功能的后台集成
视频搜索功能事实上是利用视频网站tudou的api，对tudou进行搜索，并返回搜索结果给UEditor引用。该功能的后台集成地址由配置文件中的getMovieUrl变量所指的页，在锐商企业CMS中，是/Admin/Resource路径下的UEditorGetMovie.aspx页。看看该页是如何处理的：
1.截获UEditor视频编辑界面发布来的搜索关键词和搜索类型
stringmyStringSearchKey=
HttpContext.Current.Server.HtmlEncode(
HttpContext.Current.Request["searchKey"]);
stringmyStringVideoType=
HttpContext.Current.Server.HtmlEncode(
HttpContext.Current.Request["videoType"]);
2.土豆api地址
UrimyUriTudouSearch=
newUri(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
WebClientmyWebClient=newWebClient();
Byte[]myArrayBytePageData=
myWebClient.DownloadData(myUriTudouSearch.ToString());
myString=Encoding.UTF8.GetString(myArrayBytePageData);
4.返回结果
Response.ContentType="text/plain";
Response.Write(myString);
代码下载
| 注：不知是否土豆api的问题，目前视频搜索功能返回的结果十分有限，很多关键词的搜索都没有任何结果返回。 |
结束语
假如不考虑图片，文件上传等功能后台集成，UEditor同任何CMS的集成都可以简单到几行代码，无非就是在页面中加入对UEditor资源和库文件的引用，然后通过UEditor实例对象的render方法，将编辑器渲染到页面中的textarea或javascript对象上。如果要实现图片和文件上传等功能，则需要在你的CMS后台设计相应的处理模块，对UEditor编辑器界面发布过来的图片或文件数据进行处理，并将文件信息返回编辑器界面供引用。锐商企业CMS实现了对UEditor绝大多数功能的后台集成，希望上面的集成过程可以对所有CMS开发商有所帮助。
本文来源：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度 UEditor Web 编辑器同 CMS 集成全攻略
- 百度 UEditor Web 编辑器同 CMS 集成全攻略
- Django集成百度富文本编辑器uEditor攻略
- web编辑器——百度UEditor编辑器使用教程与使用方法
- Java maven项目集成ueditor（百度本编辑器）插件详解
- 编辑器 UEditor 百度富文本web编辑器
- 织梦CMS百度编辑器(Ueditor)图片无水印解决办法
- Django集成百度富文本编辑器uEditor攻略
- 网站如何集成百度UEditor编辑器
- 网站如何集成百度UEditor编辑器
- Java maven项目集成ueditor（百度本编辑器）插件详解
- 百度富文本web编辑器UEditor上传处理部分的改造
- Django集成百度富文本编辑器uEditor攻略
- 百度编辑器 Ueditor 下拉处增加字体
- 百度ueditor 编辑器使用问题收集
- node.js集成百度UE编辑器
- asp.net mvc4使用百度ueditor编辑器
- 又一编辑神器-百度编辑器-Ueditor
- 【百度编辑器ueditor】工具，如何去掉百度编辑器 ueditor 元素路径、字数统计等
- ASP.NET使用百度编辑器（UEditor）使用方法