网站内容管理系统 上传word(UEditor基于Ueditor.NET开发版的后台集成UEditor远程图片)

　　网站内容管理系统 上传word(UEditor基于Ueditor.NET开发版的后台集成UEditor远程图片)

　　UEditor是百度网页前端研发部开发的一款所见即所得的富文本网页编辑器。拥有强大的前端编辑功能，集成在线地图、代码高亮、进度条上传等实用功能，支持海量百度前端。应用。锐商企业版cms是一款面向企业用户的内容管理系统网站，支持前端网站编辑模式（FrEE），在UEditor之前，其内置的内容编辑器是TinyMCE，特点TinyMCE的干净稳定，但功能略显单薄。UEditor在很大程度上弥补了TinyMCE的不足。对于希望在网站中提供大量前端应用的用户，UEditor 是一个不错的选择。

　　注：由于瑞尚企业版cms基于.NET，本文基于Ueditor.NET开发版。.NET、PHP、JSP三个版本的区别在于图片、文件上传等功能的后台处理模块。UEditor .NET开发版下载地址为：

　　UTF-8 版本（V1.2.5.0）|GBK 版本（V1.2.5.0）@ >

　　将下载的文件解压缩到您的 cms 产品目录。瑞尚企业版cms中的UEditor部署路径为根路径下的ueditor目录。UEditor的开发版解压后会收录很多很多的目录，但真正需要的是以下几个：

　　目录：对话框

　　目录： lang

　　目录：主题

　　目录：第三方

　　根目录下的文件：editor_all_min.js

　　根目录下的文件：editor_config.js

　　注意：UEditor的主库文件是editor_all.js，editor_all_min.js是editor_all.js的压缩版本，去掉了空白内容。为了减小引用页面的大小，应尽可能使用压缩版本。

　　在需要启用UEditor编辑器的页面中，添加如下参考代码（一般放在头部）：

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

　　在页面中创建一个 UEditor 编辑器对象：UEditor 可以在 textarea 或脚本对象上创建一个编辑器实例。使用脚本对象创建编辑器实例时，需要将脚本的type属性设置为text/plain，使用脚本对象的优点是可以避免textarea的自动字符转义处理。不过由于瑞尚企业版cms也集成了TinyMCE编辑器，为了兼顾这两种编辑器，我们还是使用textarea来创建一个编辑器实例。具体方法如下（假设你的textarea对象的id属性是text_content）：

　　这样，你页面中用于编辑内容的teaxtarea对象就会被UEditor编辑器替换，编辑器在编辑过程中生成的内容（HTML代码内容）会随时传递给你的textarea对象进行发布到后台保存。

　　修改 UEditor 的配置文件

　　在上面的 UEditor 参考中，我们已经引用了 editor_config.js 文件，也就是 UEditor 的配置文件。UEditor将配置变量放在一个单独的文件中，可以方便cms中网站的最终管理器在系统外调整编辑器的性能和行为，当然cms开发者可以仍然在他们的页面中调用配置文件中的变量，并用他们的程序逻辑改变配置。在与cms集成的过程中，最可能用到的配置变量如下（这些变量指向的页面是瑞尚企业cms为UEditor定制的后台处理模块）：

　　除了以上 6 个参数外，在 UEditor 与 cms 的集成过程中还可能会用到以下变量：

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

　　UEditor图片上传功能后台集成

　　按照以上步骤部署好UEditor后，大部分功能都可以直接使用，但是图片、文件上传等功能还需要相应后台模块的支持才能接收并保存上传的文件，并返回上传的信息文件。由 UEditor 调用。UEditor的图片上传界面包括四个选项卡：远程图片、本地上传、在线管理、图片搜索。本节介绍本地上传图片的后台接收和处理。

　　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条信息：

　　现在构造返回的 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”字符串来分隔每个图片地址（这个字符串可以在配置文件中通过separator变量设置，默认为“ ue_separate_ue")。发布的远程图片地址可以通过后台下面的代码转换成数组：

　　string[] myArrayStringRemoteImageUrl=

Regex.Split(myStringRemoteImageUrl, "ue_separate_ue", RegexOptions.IgnoreCase);

　　2. 对于数组中的每个远程图片文件，使用.NET的WebClient组件下载到本地站点后台

　　for (int i = 0; i 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":""},

　　将其修改为

　　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文件的加载事件之前。

　　代码下载

　　附件.html 文件的自定义

　　UEditor文件上传功能后台集成代码

　　UEditor视频搜索功能后台集成

　　其实视频搜索功能是使用video网站土豆网的api来搜索土豆网，并将搜索结果返回给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

&a*敏*感*词*ey=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开发团队撰写。