UEditor 是由百度 Web 前端研發部開發的所見即所得富文本 Web 編輯器，擁有強大的前端編輯功能，集成了諸如在線地圖，代碼加亮，進度條上傳等實用功能，同時支持大量的百度前端應用。銳商企業CMS是一款面向企業用戶的網站內容管理系統，支持前端網站編輯模式（FrEE），在 UEditor 之前，其內置的內容編輯器為 TinyMCE，TinyMCE 的特點是干凈，穩定，然而功能上略顯單薄，UEditor 很大程度上彌補了 TinyMCE 的不足，對希望在網站中提供大量前端應用的用戶來說， UEditor 是不錯的選擇。本文根據銳商企業 CMS 開發組在集成 UEditor 編輯器的工作中所記錄的文檔整理而成，期在幫助其他 CMS 開發者了解該編輯器詳細的集成過程。

在 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 變量所指的地址。

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 圖片編輯界面的定制

銳商企業 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":""},

將其修改為

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 視頻搜索功能的后臺集成代碼

結束語

假如不考慮圖片，文件上傳等功能后臺集成，UEditor 同任何 CMS 的集成都可以簡單到幾行代碼，無非就是在頁面中加入對 UEditor 資源和庫文件的引用，然后通過 UEditor 實例對象的 render 方法，將編輯器渲染到頁面中的 textarea 或 javascript 對象上。如果要實現圖片和文件上傳等功能，則需要在你的 CMS 后臺設計相應的處理模塊，對 UEditor 編輯器界面發布過來的圖片或文件數據進行處理，并將文件信息返回編輯器界面供引用。銳商企業 CMS 實現了對 UEditor 絕大多數功能的后臺集成，希望上面的集成過程可以對所有 CMS 開發商有所幫助。

本文來源：銳商企業 CMS 官方網站，由銳商企業 CMS 開發組編寫。