一,、富文本內容交互
1、編輯器內容初始化（即往編輯器中設置富文本）
場景一：寫新文章,，編輯器中預置提示,、問候等內容。
在editor_config.js文件中找到initialContent參數(shù),，設置其值為需要的提示或者問候語即可,，如initialContent:’歡迎使用UEditor!’。
場景二：編輯舊文章,，從數(shù)據(jù)庫中取出富文本放置到編輯器中,。
顯然，編輯文章時需要從后臺數(shù)據(jù)庫中取出大段富文本,，如果仍然采用場景一中的方式去設置初始值的話,，必然會帶來諸如引號匹配被截斷等問題，因此需要采用另外一種方式去設置,，如下代碼所示：
1 2 3 | <script type="text/plain" id="editor">
//從數(shù)據(jù)庫中取出文章內容打印到此處
</script>
|
此處采用了script標簽作為編輯器容器對象,，并設置了其類型是純文本，從而在避免了標簽內部JS代碼執(zhí)行的同時解決了部分同學在使用傳統(tǒng)的textarea標簽作為容器所帶來的一次額外轉碼問題,。
2,、提交編輯器內容至后端
場景一：在編輯器所在的Form中存在提交按鈕,，提交動作由點擊此按鈕完成。
該場景適用于最普通的場合,，沒有太大問題需要注意,，僅三點說明：
1) 默認情況下提交到后臺的表單名稱是 “editorValue”，在editor_config.js中可以配置,，參數(shù)名為textarea,。
2) 可以在容器標簽（即script標簽）上設置name屬性，以覆蓋editor_config.js中的默認配置,。實例代碼如下,，此處的myContent將成為新的提交表單名稱：
1 2 3 4 5 | <form action="" method="post">
<script type="text/plain" id="editor" name="myContent">
</script>
<input type="submit" name="submit" value="提交">
</form>
|
3）后端接收程序可以通過如下幾種方式來獲取編輯器中的富文本內容。
1 2 3 4 5 6 7 8 9 10 11 | //PHP獲?。?/code>
$_POST["myContent"]
//JSP獲?。?/code>
request.getParameter("myContent");
//ASP獲取：
request("myContent");
//NET獲取:
context.Request.Form["myContent"];
|
場景二：編輯器所在的Form中不存在提交按鈕,，提交動作由外部事件觸發(fā),。
該場景適用于站點前端交互較多的場合，需要注意的事項主要是在觸發(fā)form提交動作之前執(zhí)行編輯器內容同步操作,。一般的代碼模式如下所示：
1 2 3 4 5 | //滿足提交條件時同步內容并提交,，此處editor為編輯器實例
if(editor.hasContent()){ //此處以非空為例
editor.sync(); //同步內容
someForm.submit(); //提交Form
}
|
此處editor是編輯器實例對象。
場景三：編輯器不在任何Form中,，提交動作由外部事件觸發(fā),。
該場景使用不多，但特殊時候可能需要,。UEditor也提供了對應的處理方案,，基本邏輯跟場景二一樣，只是在執(zhí)行同步操作的時候需要傳入提交form的id,，如editor.sync(myFormID)即可,。其他同場景二。
二,、圖片上傳交互
1,、傳統(tǒng)圖片上傳
傳統(tǒng)圖片上傳涉及到的前后端交互主要涉及“上傳提交路徑”以及“圖片保存路徑”兩個參數(shù)，后臺保存路徑以任何形式（絕對或者相對）,、在任何頁面展示跟前臺無關,。
2、Flash圖片上傳
Flahs圖片上傳和傳統(tǒng)圖片上傳存在一個很大的區(qū)別：它需要服務器端實時返回“圖片保存路徑”用于在前臺的即時展示,。具體到編輯器,，就是需要將返回的路徑插入到編輯器中。由此會引出除傳統(tǒng)圖片上傳中提到的兩個參數(shù)之外的第三個參數(shù)：“前后端修正路徑”。如果后臺返回的保存路徑是絕對路徑（指以http開頭的路徑,，以根目錄開始的路徑也可勉強歸入其中）,，那么前臺無須做任何修正，否則用戶必須十分清楚自己當前的目錄結構并據(jù)此修正這個前后端相對路徑之間的差異,。因此,，UEditor極力推薦由服務器端返回以根目錄開始的相對路徑。
3,、UEditor中的上傳實踐及注意事項
在UEditor中,，“上傳提交路徑”和“前后端修正路徑”的配置位于editor_config.js中。其中,，imageUrl參數(shù)對應著“上傳提交路徑”,，imagePath參數(shù)對應著“前后端修正路徑”。而“圖片保存路徑”則需要在server/upload/php目錄下的imageUp文件中配置,。
路徑配置完成之后,，還需要配置imageFieldName參數(shù)作為文件表單的表單名，后臺可以據(jù)此獲取文件句柄,。該參數(shù)同樣位于editor_config.js中,。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //圖片上傳提交地址
imageUrl:URL+"server/upload/php/imageUp.php",
//圖片修正地址，引用了fixedImagePath,如有特殊需求,，可自行配置
imagePath:fixedImagePath,
//圖片描述的key
imageFieldName:"upFile",
//等比壓縮的基準，確定maxImageSideLength參數(shù)的參照對象.
//0為按照最長邊,，1為按照寬度,，2為按照高度
compressSide:0,
//上傳圖片最大允許的邊長，超過會自動等比縮放,不縮放就設置一個比較大的值
//更多設置在image.html中
maxImageSideLength:900
|
完成上述配置之后,，理論上后臺應該可以接收到前臺上傳的圖片文件了,。在正確保存之后，傳統(tǒng)圖片上傳至此就結束了,。但是,，在使用Flash上傳的編輯器中，流程還遠未結束,。
首先,，后臺需要計算得出圖片文件存放的地址字符串。該字符串UEditor極力推薦使用從網站根目錄開始算起,，一直到圖片名結束為止,。如果不從網站根目錄開始算起，后面需要考慮“前后端修正地址”參數(shù),。
其次,，后臺返回一個json格式的字符串，格式具體要求如下：
1 | { "url":"圖片地址", "title":"圖片描述", "state":"上傳狀態(tài)" }
|
其中，url對應計算出的圖片保存地址——再強調一遍,，盡量構造出從網站根目錄開始的地址字符串,；title對應flash中的描述字段，在圖片上將會被設置到title屬性中,；state對應服務器端返回的圖片上傳狀態(tài)字符：除了上傳成功返回“SUCCESS”之外,，其他任何值都將被直接顯示在返回的圖片描述字段內。
最后,，UEditor會在返回的url地址前面增加“前后端修整路徑”這個參數(shù)值作為最后插入編輯器中的圖片地址,。因此，如果服務器端返回的是從根目錄開始的圖片路徑或者http開頭的絕對路徑,，“前后端修正路徑”必須留空,。
舉例來講，如果服務器返回的路徑是“/myProject/uploads/sun.jpg”,那么插入到編輯器中的路徑會是“前后端修正路徑 + /myProject/uploads/sun.jpg”,。
三,、Word圖片轉存交互
1、圖片轉存原理
所謂word圖片轉存,，是指UEditor為了解決用戶從word中復制了一篇圖文混排的文章粘貼到編輯器之后,，word文章中的圖片數(shù)據(jù)無法顯示在編輯器中，也無法提交到服務器上的問題而開發(fā)的一個操作簡便的圖片轉存方案,。
該功能的基本操作步驟：復制word文檔——》粘貼到編輯器——》編輯器會將所有圖片轉換成一個占位圖,，同時在工具欄中高亮轉存按鈕——》點擊轉存按鈕彈出圖片上傳框——》點擊復制按鈕復制圖片目錄地址——》點擊“添加照片”按鈕，在彈出的選擇框中粘貼剛復制的圖片目錄地址——》點擊打開按鈕,，選擇目錄下的所有圖片文件,，在此點擊打開——》執(zhí)行圖片上傳——》上傳成功確認插入，UEditor將自動完成對應占位圖的替換過程,。
2,、配置要點及注意事項
word圖片轉存跟普通圖片上傳的配置基本一樣，所不同的僅僅是操作上的差異：前者需要首先獲取臨時圖片文件存在的目錄,，后者直接選擇自己指定的文件目錄,。PS：在部分操作系統(tǒng)的部分版本word中發(fā)現(xiàn)單張word圖片會生成兩張臨時圖片，且格式不一,，清晰度各異,，目前暫時未發(fā)現(xiàn)改進方法。
四,、遠程圖片抓取交互
1,、遠程抓取原理
圖片遠程抓取是指在插入本地域名之外的圖片鏈接地址時，由服務器將這些外部圖片抓取到本地服務器保存的一個功能,。實現(xiàn)原理為在編輯器中向服務器發(fā)送包含所有外域圖片地址的ajax請求,，然后由服務器在后端抓取保存后返回圖片地址給編輯器，再由編輯器完成外域地址和本地地址的替換工作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //是否開啟遠程圖片抓取
catchRemoteImageEnable:true,
//處理遠程圖片抓取的地址
catcherUrl:URL +"server/submit/php/getRemoteImage.php",
//提交到后臺遠程圖片uri合集的表單名
catchFieldName:"upFile",
//圖片修正地址,，同imagePath
catcherPath:fixedImagePath,
//本地頂級域名,，當開啟遠程圖片抓取時，除此之外的所有其它域名下的
//圖片都將被抓取到本地
localDomain:["baidu.com","10.81.2.114"],
|
2,、注意事項
遠程抓取功能是否開啟可在edicot_config.js中通過配置catchRemoteImageEnable參數(shù)實現(xiàn),。與這個功能相關的配置還包括了遠程抓取的處理程序地址，表單域名稱,，本地域和“前后端修正地址”,。遠程抓取處理程序實現(xiàn)了依據(jù)前端提交的地址列表（使用ue_separate_ue標示符進行分隔的字符串）進行圖片抓取，然后返回地址列表給客戶端的功能,。
前后臺交互數(shù)據(jù)格式樣例：（URL1,，URL2，URL3,，URL4）
1 | URL1ue_separate_ueURL2ue_separate_ueURL3ue_separate_ueURL4
|
五,、圖片在線管理交互
1、圖片在線管理介紹
圖片在線管理是指通過讀取服務器端的文件目錄并將其展示到編輯器中的進行額外一些操作的功能,。處于安全考慮,，目前UEditor僅實現(xiàn)了圖片二次插入操作,，其他諸如刪除、移動等操作將會在后續(xù)二次開發(fā)教程中陸續(xù)放出,。
1 2 3 4 5 | //圖片在線管理的處理地址
imageManagerUrl:URL + "server/submit/php/imageManager.php",
//圖片修正地址，同imagePath
imageManagerPath:fixedImagePath
|
2,、注意事項
圖片在線管理需要配置的參數(shù)跟遠程圖片抓取一致，兩者不同的地方是圖片在線管理中的圖片數(shù)據(jù)是由服務器端指定某個目錄,，然后遍歷其下的所有圖片文件得到,，然后將地址返回給編輯器，而遠程圖片抓取則是由編輯器提交圖片地址,，經過服務器端的抓取處理后返回新的地址給編輯器,。兩者的初始觸發(fā)都需要ajax的介入。
六,、屏幕截圖交互
1,、屏幕截圖介紹
使用了ActiveX控件，目前只支持IE瀏覽器,。
2,、注意事項
需要配置的參數(shù)除了跟圖片上傳一樣的內容之外,，還多出了服務器地址和端口的配置,。具體使用時請根據(jù)自身服務器的特點做出適應修改,。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //屏幕截圖的server端文件所在的網站地址或者ip,，請不要加http://snapscreenHost: '127.0.0.1',
//屏幕截圖的server端保存程序，UEditor的范例代碼為“URL
snapscreenServerUrl: URL +"server/upload/php/snapImgUp.php", +"server/upload/php/snapImgUp.php"”
//屏幕截圖的server端端口
snapscreenServerPort: 80,
//截圖的圖片默認的排版方式
snapscreenImgAlign: 'center',
//截圖顯示修正地址
snapscreenPath: fixedImagePath,
|
七,、附件上傳交互
1,、附件上傳注意事項
附件上傳的基本配置跟圖片類似。另外,，由于附件上傳采用了相當成熟的swfupload開源框架,，因此大部分的文檔和資料盡可參考swfupload的官網教程。官網地址：http：//www.
