一、富文本內容交互
1、編輯器內容初始化（即往編輯器中設置富文本）
場景一：寫新文章，編輯器中預置提示、問候等內容。
在editor_config.js文件中找到initialContent參數，設置其值為需要的提示或者問候語即可，如initialContent:’歡迎使用UEditor!’。
場景二：編輯舊文章，從數據庫中取出富文本放置到編輯器中。
顯然，編輯文章時需要從后台數據庫中取出大段富文本，如果仍然采用場景一中的方式去設置初始值的話，必然會帶來諸如引號匹配被截斷等問題，因此需要采用另外一種方式去設置，如下代碼所示：
|
1
2
3
|
<script type=
"text/plain"
id=
"editor"
>
//從數據庫中取出文章內容打印到此處
</script>
|
此處采用了script標簽作為編輯器容器對象，並設置了其類型是純文本，從而在避免了標簽內部JS代碼執行的同時解決了部分同學在使用傳統的textarea標簽作為容器所帶來的一次額外轉碼問題。
2、提交編輯器內容至后端
場景一：在編輯器所在的Form中存在提交按鈕，提交動作由點擊此按鈕完成。
該場景適用於最普通的場合，沒有太大問題需要注意，僅三點說明：
1) 默認情況下提交到后台的表單名稱是 “editorValue”，在editor_config.js中可以配置，參數名為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 name=
"submit"
value=
"提交"
type=
"submit"
>
</form>
|
3）后端接收程序可以通過如下幾種方式來獲取編輯器中的富文本內容。
|
1
2
3
4
5
6
7
8
9
10
11
|
//PHP獲取：
$_POST[
"myContent"
]
//JSP獲取：
request.getParameter(
"myContent"
);
//ASP獲取：
request(
"myContent"
);
//NET獲取:
context.Request.Form[
"myContent"
];
|
場景二：編輯器所在的Form中不存在提交按鈕，提交動作由外部事件觸發。
該場景適用於站點前端交互較多的場合，需要注意的事項主要是在觸發form提交動作之前執行編輯器內容同步操作。一般的代碼模式如下所示：
|
1
2
3
4
5
|
//滿足提交條件時同步內容並提交，此處editor為編輯器實例
if
(editor.hasContents()){
//此處以非空為例
editor.sync();
//同步內容
someForm.submit();
//提交Form
}
|
如果使用的是jquery validation可以參考如下代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
$(
function
(){
var
editor =
new
UE.ui.Editor();
editor.render(
'content'
);
editor.addListener(
'contentchange'
,
function
(){
this
.sync();
//1.2.4+以后可以直接給textarea的id名字就行了
$(
'textarea'
).valid();
});
var
validator = $(
"#myform"
).submit(
function
() {
editor.sync();
}).validate({
ignore:
""
,
rules: {
title:
"required"
,
content:
"required"
},
errorPlacement:
function
(label, element) {
// position error label after generated textarea
if
(element.is(
"textarea"
)) {
label.insertAfter(element.next());
}
else
{
label.insertAfter(element)
}
}
});
validator.focusInvalid =
function
() {
// put focus on tinymce on submit validation
if
(
this
.settings.focusInvalid ) {
try
{
var
toFocus = $(
this
.findLastActive() ||
this
.errorList.length &&
this
.errorList[0].element || []);
if
(toFocus.is(
"textarea"
)) {
editor.focus()
}
else
{
toFocus.filter(
":visible"
).focus();
}
}
catch
(e) {
// ignore IE throwing errors when focusing hidden elements
}
}
}
})
|
此處editor是編輯器實例對象。
場景三：編輯器不在任何Form中，提交動作由外部事件觸發。
該場景使用不多，但特殊時候可能需要。UEditor也提供了對應的處理方案，基本邏輯跟場景二一樣，只是在執行同步操作的時候需要傳入提交form的id，如editor.sync(myFormID)即可。其他同場景二。
二、圖片上傳交互
1、傳統圖片上傳
傳統圖片上傳涉及到的前后端交互主要涉及“上傳提交路徑”以及“圖片保存路徑”兩個參數，后台保存路徑以任何形式（絕對或者相對）、在任何頁面展示跟前台無關。
2、Flash圖片上傳
Flahs圖 片上傳和傳統圖片上傳存在一個很大的區別：它需要服務器端實時返回“圖片保存路徑”用於在前台的即時展示。具體到編輯器，就是需要將返回的路徑插入到編輯 器中。由此會引出除傳統圖片上傳中提到的兩個參數之外的第三個參數：“前后端修正路徑”。如果后台返回的保存路徑是絕對路徑（指以http開頭的路徑，以 根目錄開始的路徑也可勉強歸入其中），那么前台無須做任何修正，否則用戶必須十分清楚自己當前的目錄結構並據此修正這個前后端相對路徑之間的差異。因 此，UEditor極力推薦由服務器端返回以根目錄開始的相對路徑。
3、UEditor中的上傳實踐及注意事項
在 UEditor中，“上傳提交路徑”和“前后端修正路徑”的配置位於editor_config.js中。其中，imageUrl參數對應着“上傳提交路 徑”，imagePath參數對應着“前后端修正路徑”。而“圖片保存路徑”則需要在server/upload/php目錄下的imageUp文件中配 置。
路徑配置完成之后，還需要配置imageFieldName參數作為文件表單的表單名，后台可以據此獲取文件句柄。該參數同樣位於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參數的參照對象.
//0為按照最長邊，1為按照寬度，2為按照高度
compressSide:0,
//上傳圖片最大允許的邊長，超過會自動等比縮放,不縮放就設置一個比較大的值
//更多設置在image.html中
maxImageSideLength:900
|
完成上述配置之后，理論上后台應該可以接收到前台上傳的圖片文件了。在正確保存之后，傳統圖片上傳至此就結束了。但是，在使用Flash上傳的編輯器中，流程還遠未結束。
首先，后台需要計算得出圖片文件存放的地址字符串。該字符串UEditor極力推薦使用從網站根目錄開始算起，一直到圖片名結束為止。如果不從網站根目錄開始算起，后面需要考慮“前后端修正地址”參數。
其次，后台返回一個json格式的字符串，格式具體要求如下：
|
1
|
{
"url"
:
"圖片地址"
,
"title"
:
"圖片描述"
,
"state"
:
"上傳狀態"
}
|
其 中，url對應計算出的圖片保存地址——再強調一遍，盡量構造出從網站根目錄開始的地址字符串；title對應flash中的描述字段，在圖片上將會被設 置到title屬性中；state對應服務器端返回的圖片上傳狀態字符：除了上傳成功返回“SUCCESS”之外，其他任何值都將被直接顯示在返回的圖片 描述字段內。
最后，UEditor會在返回的url地址前面增加“前后端修整路徑”這個參數值作為最后插入編輯器中的圖片地址。因此，如果服務器端返回的是從根目錄開始的圖片路徑或者http開頭的絕對路徑，“前后端修正路徑”必須留空。
舉例來講，如果服務器返回的路徑是“/myProject/uploads/sun.jpg”,那么插入到編輯器中的路徑會是“前后端修正路徑 + /myProject/uploads/sun.jpg”。
三、Word圖片轉存交互
1、圖片轉存原理
所謂word圖片轉存，是指UEditor為了解決用戶從word中復制了一篇圖文混排的文章粘貼到編輯器之后，word文章中的圖片數據無法顯示在編輯器中，也無法提交到服務器上的問題而開發的一個操作簡便的圖片轉存方案。
該 功能的基本操作步驟：復制word文檔——》粘貼到編輯器——》編輯器會將所有圖片轉換成一個占位圖，同時在工具欄中高亮轉存按鈕——》點擊轉存按鈕彈出 圖片上傳框——》點擊復制按鈕復制圖片目錄地址——》點擊“添加照片”按鈕，在彈出的選擇框中粘貼剛復制的圖片目錄地址——》點擊打開按鈕，選擇目錄下的 所有圖片文件，在此點擊打開——》執行圖片上傳——》上傳成功確認插入，UEditor將自動完成對應占位圖的替換過程。
2、配置要點及注意事項
word圖 片轉存跟普通圖片上傳的配置基本一樣，所不同的僅僅是操作上的差異：前者需要首先獲取臨時圖片文件存在的目錄，后者直接選擇自己指定的文件目錄。PS：在 部分操作系統的部分版本word中發現單張word圖片會生成兩張臨時圖片，且格式不一，清晰度各異，目前暫時未發現改進方法。
四、遠程圖片抓取交互
1、遠程抓取原理
圖 片遠程抓取是指在插入本地域名之外的圖片鏈接地址時，由服務器將這些外部圖片抓取到本地服務器保存的一個功能。實現原理為在編輯器中向服務器發送包含所有 外域圖片地址的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參數實現。與這個功能相關的配置還包括 了遠程抓取的處理程序地址，表單域名稱，本地域和“前后端修正地址”。遠程抓取處理程序實現了依據前端提交的地址列表（使用ue_separate_ue 標示符進行分隔的字符串）進行圖片抓取，然后返回地址列表給客戶端的功能。
前后台交互數據格式樣例：（URL1，URL2，URL3，URL4）
|
1
|
URL1ue_separate_ueURL2ue_separate_ueURL3ue_separate_ueURL4
|
五、圖片在線管理交互
1、圖片在線管理介紹
圖片在線管理是指通過讀取服務器端的文件目錄並將其展示到編輯器中的進行額外一些操作的功能。處於安全考慮，目前UEditor僅實現了圖片二次插入操作，其他諸如刪除、移動等操作將會在后續二次開發教程中陸續放出。
|
1
2
3
4
5
|
//圖片在線管理的處理地址
imageManagerUrl:URL +
"server/submit/php/imageManager.php"
,
//圖片修正地址，同imagePath
imageManagerPath:fixedImagePath
|
2、注意事項
圖 片在線管理需要配置的參數跟遠程圖片抓取一致，兩者不同的地方是圖片在線管理中的圖片數據是由服務器端指定某個目錄，然后遍歷其下的所有圖片文件得到，然 后將地址返回給編輯器，而遠程圖片抓取則是由編輯器提交圖片地址，經過服務器端的抓取處理后返回新的地址給編輯器。兩者的初始觸發都需要ajax的介入。
六、屏幕截圖交互
1、屏幕截圖介紹
使用了ActiveX控件，目前只支持IE瀏覽器。
2、注意事項
需要配置的參數除了跟圖片上傳一樣的內容之外，還多出了服務器地址和端口的配置。具體使用時請根據自身服務器的特點做出適應修改。
|
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.swfupload.org
一、官網上下載完整源碼包，解壓到任意目錄，解壓后的源碼目錄結構如下所示：
_examples：編輯器完整版的示例頁面
dialogs：彈出對話框對應的資源和JS文件
themes：樣式圖片和樣式文件
php/jsp/.net：涉及到服務器端操作的后台文件，根據你選擇的不同后台版本，這里也會不同，這里應該是jsp,php,.net
third-party：第三方插件(包括代碼高亮，源碼編輯等組件）
editor_all.js：_src目錄下所有文件的打包文件
editor_all_min.js：editor_all.js文件的壓縮版，建議在正式部署時才采用
editor_config.js：編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄
二、部署UEditor到實際項目（UETest）中的步驟:
圖表 1
第一步：在項目的任一文件夾中建立一個用於存放UEditor相關資源和文件的目錄，此處在項目根目錄下建立，起名為ueditor。
第二步：拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。其中，除了ueditor目錄之外的其余文件均為具體項目文件，此處所列僅供示例。
第三步：為簡單起見，此處將以根目錄下的index.php頁面作為編輯器的實例化頁面，用來展示UEditor的完整版效果。在index.php文件中，首先導入編輯器需要的三個入口文件，示例代碼如下：
|
1
2
3
4
|
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>編輯器完整版實例</
title
>
<
script
type
=
"text/javascript"
src
=
"ueditor/editor_config.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"ueditor/editor_all.js"
></
script
>
|
第四步：然后在index.php文件中創建編輯器實例及其DOM容器。具體代碼示例如下：
|
1
2
3
4
5
6
7
|
<
textarea
name
=
"后台取值的key"
id
=
"myEditor"
>這里寫你的初始化內容</
textarea
>
<
script
type
=
"text/javascript"
>
var editor = new UE.ui.Editor();
editor.render("myEditor");
//1.2.4以后可以使用一下代碼實例化編輯器
//UE.getEditor('myEditor')
</
script
>
|
最后一步： 在/UETest/ueditor/ editor_config.js中查找URL變量配置編輯器在你項目中的路徑。
|
1
2
|
//強烈推薦以這種方式進行絕對路徑配置
URL= window.UEDITOR_HOME_URL||
"/UETest/ueditor/"
;
|
至此，一個完整的編輯器實例就已經部署到咱們的項目中了！在瀏覽器中輸入http://localhost/UETest 運行下試試UE強大的功能吧！
三、注意事項
1.在引用editor_config.js時，最好先於editor_all.js加載，否則特定情況下可能會出現報錯。
2.若希望給編輯器賦初值，請參考“前后端數據交互”
3. 需 要注意的是編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面為當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。鑒於很多同學 在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對於網站根目錄的相對路徑"進行配置。"相對於網站根目錄的相對路徑"也就是以斜杠開頭 的形如"/UETest/ueditor/"這樣的路徑。
此外如果你使用的是相對路徑,例如"ueditor/"(相對於圖表1路徑結構)，如果站點中有多個不在同一層級的頁面需要實例化編輯器，且引用了同一UEditor的時候，可能不適用於每個頁面的編輯器。因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要實例化編輯器的頁面最頂部寫上如下代碼即可。
當然，需要令此處的URL等於對應的配置。window.UEDITOR_HOME_URL ="/xxxx/xxxx/";
例如：根據圖表1的目錄結構
如果你在index.php里使用編輯器，那么在editor_config.js里最上邊的var URL就改成 var URL = "/UETest/ueditor/"