前后端數(shù)據(jù)交互

2012-05-11 16:09:13

一、富文本內(nèi)容交互

1、編輯器內(nèi)容初始化(即往編輯器中設(shè)置富文本)

場景一：寫新文章，編輯器中預(yù)置提示、問候等內(nèi)容。

在editor_config.js文件中找到initialContent參數(shù)，設(shè)置其值為需要的提示或者問候語即可，如initialContent:’歡迎使用UEditor!’。

場景二：編輯舊文章，從數(shù)據(jù)庫中取出富文本放置到編輯器中。

顯然，編輯文章時需要從后臺數(shù)據(jù)庫中取出大段富文本，如果仍然采用場景一中的方式去設(shè)置初始值的話，必然會帶來諸如引號匹配被截?cái)嗟葐栴}，因此需要采用另外一種方式去設(shè)置，如下代碼所示：

此處采用了script標(biāo)簽作為編輯器容器對象，并設(shè)置了其類型是純文本，從而在避免了標(biāo)簽內(nèi)部JS代碼執(zhí)行的同時解決了部分同學(xué)在使用傳統(tǒng)的textarea標(biāo)簽作為容器所帶來的一次額外轉(zhuǎn)碼問題。

2、提交編輯器內(nèi)容至后端

場景一：在編輯器所在的Form中存在提交按鈕，提交動作由點(diǎn)擊此按鈕完成。

該場景適用于最普通的場合，沒有太大問題需要注意，僅三點(diǎn)說明：

1)?默認(rèn)情況下提交到后臺的表單名稱是?“editorValue”，在editor_config.js中可以配置，參數(shù)名為textarea。

2)?可以在容器標(biāo)簽(即script標(biāo)簽)上設(shè)置name屬性，以覆蓋editor_config.js中的默認(rèn)配置。實(shí)例代碼如下，此處的myContent將成為新的提交表單名稱：

3)后端接收程序可以通過如下幾種方式來獲取編輯器中的富文本內(nèi)容。

場景二：編輯器所在的Form中不存在提交按鈕，提交動作由外部事件觸發(fā)。

該場景適用于站點(diǎn)前端交互較多的場合，需要注意的事項(xiàng)主要是在觸發(fā)form提交動作之前執(zhí)行編輯器內(nèi)容同步操作。一般的代碼模式如下所示：????

此處editor是編輯器實(shí)例對象。

場景三：編輯器不在任何Form中，提交動作由外部事件觸發(fā)。

該場景使用不多，但特殊時候可能需要。UEditor也提供了對應(yīng)的處理方案，基本邏輯跟場景二一樣，只是在執(zhí)行同步操作的時候需要傳入提交form的id，如editor.sync(myFormID)即可。其他同場景二。

二、圖片上傳交互

1、傳統(tǒng)圖片上傳

傳統(tǒng)圖片上傳涉及到的前后端交互主要涉及“上傳提交路徑”以及“圖片保存路徑”兩個參數(shù)，后臺保存路徑以任何形式(絕對或者相對)、在任何頁面展示跟前臺無關(guān)。

2、Flash圖片上傳

Flahs圖片上傳和傳統(tǒng)圖片上傳存在一個很大的區(qū)別：它需要服務(wù)器端實(shí)時返回 “圖片保存路徑”用于在前臺的即時展示。具體到編輯器，就是需要將返回的路徑插入到編輯器中。由此會引出除傳統(tǒng)圖片上傳中提到的兩個參數(shù)之外的第三個參 數(shù)：“前后端修正路徑”。如果后臺返回的保存路徑是絕對路徑(指以http開頭的路徑，以根目錄開始的路徑也可勉強(qiáng)歸入其中)，那么前臺無須做任何修正， 否則用戶必須十分清楚自己當(dāng)前的目錄結(jié)構(gòu)并據(jù)此修正這個前后端相對路徑之間的差異。因此，UEditor極力推薦由服務(wù)器端返回以根目錄開始的相對路徑。

3、UEditor中的上傳實(shí)踐及注意事項(xiàng)

在UEditor中，“上傳提交路徑”和“前后端修正路徑”的配置位于 editor_config.js中。其中，imageUrl參數(shù)對應(yīng)著“上傳提交路徑”，imagePath參數(shù)對應(yīng)著“前后端修正路徑”。而“圖片保 存路徑”則需要在server/upload/php目錄下的imageUp文件中配置。

路徑配置完成之后，還需要配置imageFieldName參數(shù)作為文件表單的表單名，后臺可以據(jù)此獲取文件句柄。該參數(shù)同樣位于editor_config.js中。

完成上述配置之后，理論上后臺應(yīng)該可以接收到前臺上傳的圖片文件了。在正確保存之后，傳統(tǒng)圖片上傳至此就結(jié)束了。但是，在使用Flash上傳的編輯器中，流程還遠(yuǎn)未結(jié)束。

首先，后臺需要計(jì)算得出圖片文件存放的地址字符串。該字符串UEditor極力推薦使用從網(wǎng)站根目錄開始算起，一直到圖片名結(jié)束為止。如果不從網(wǎng)站根目錄開始算起，后面需要考慮“前后端修正地址”參數(shù)。

其次，后臺返回一個json格式的字符串，格式具體要求如下：

其中，url對應(yīng)計(jì)算出的圖片保存地址——再強(qiáng)調(diào)一遍，盡量構(gòu)造出從網(wǎng)站根目錄開 始的地址字符串；title對應(yīng)flash中的描述字段，在圖片上將會被設(shè)置到title屬性中；state對應(yīng)服務(wù)器端返回的圖片上傳狀態(tài)字符：除了上 傳成功返回“SUCCESS”之外，其他任何值都將被直接顯示在返回的圖片描述字段內(nèi)。

最后，UEditor會在返回的url地址前面增加“前后端修整路徑”這個參數(shù)值作為最后插入編輯器中的圖片地址。因此，如果服務(wù)器端返回的是從根目錄開始的圖片路徑或者h(yuǎn)ttp開頭的絕對路徑，“前后端修正路徑”必須留空。

舉例來講，如果服務(wù)器返回的路徑是“/myProject/uploads/sun.jpg”,那么插入到編輯器中的路徑會是“前后端修正路徑?+??/myProject/uploads/sun.jpg”。

三、Word圖片轉(zhuǎn)存交互

1、圖片轉(zhuǎn)存原理

????所謂word圖片轉(zhuǎn)存，是指UEditor為了解決用戶從word中復(fù)制了一篇圖文混排的文章粘貼到編輯器之后，word文章中的圖片數(shù)據(jù)無法顯示在編輯器中，也無法提交到服務(wù)器上的問題而開發(fā)的一個操作簡便的圖片轉(zhuǎn)存方案。

????該功能的基本操作步驟：復(fù)制word文檔——》粘貼到編輯器——》編輯器 會將所有圖片轉(zhuǎn)換成一個占位圖，同時在工具欄中高亮轉(zhuǎn)存按鈕——》點(diǎn)擊轉(zhuǎn)存按鈕彈出圖片上傳框——》點(diǎn)擊復(fù)制按鈕復(fù)制圖片目錄地址——》點(diǎn)擊“添加照片” 按鈕，在彈出的選擇框中粘貼剛復(fù)制的圖片目錄地址——》點(diǎn)擊打開按鈕，選擇目錄下的所有圖片文件，在此點(diǎn)擊打開——》執(zhí)行圖片上傳——》上傳成功確認(rèn)插 入，UEditor將自動完成對應(yīng)占位圖的替換過程。

2、配置要點(diǎn)及注意事項(xiàng)

????word圖片轉(zhuǎn)存跟普通圖片上傳的配置基本一樣，所不同的僅僅是操作上的 差異：前者需要首先獲取臨時圖片文件存在的目錄，后者直接選擇自己指定的文件目錄。PS：在部分操作系統(tǒng)的部分版本word中發(fā)現(xiàn)單張word圖片會生成 兩張臨時圖片，且格式不一，清晰度各異，目前暫時未發(fā)現(xiàn)改進(jìn)方法。

四、遠(yuǎn)程圖片抓取交互

1、遠(yuǎn)程抓取原理

????圖片遠(yuǎn)程抓取是指在插入本地域名之外的圖片鏈接地址時，由服務(wù)器將這些外 部圖片抓取到本地服務(wù)器保存的一個功能。實(shí)現(xiàn)原理為在編輯器中向服務(wù)器發(fā)送包含所有外域圖片地址的ajax請求，然后由服務(wù)器在后端抓取保存后返回圖片地 址給編輯器，再由編輯器完成外域地址和本地地址的替換工作。

2、注意事項(xiàng)

????遠(yuǎn)程抓取功能是否開啟可在edicot_config.js中通過配置 catchRemoteImageEnable參數(shù)實(shí)現(xiàn)。與這個功能相關(guān)的配置還包括了遠(yuǎn)程抓取的處理程序地址，表單域名稱，本地域和“前后端修正地 址”。遠(yuǎn)程抓取處理程序?qū)崿F(xiàn)了依據(jù)前端提交的地址列表(使用ue_separate_ue標(biāo)示符進(jìn)行分隔的字符串)進(jìn)行圖片抓取，然后返回地址列表給客戶 端的功能。

????前后臺交互數(shù)據(jù)格式樣例：(URL1，URL2，URL3，URL4)???

五、圖片在線管理交互

1、圖片在線管理介紹

????圖片在線管理是指通過讀取服務(wù)器端的文件目錄并將其展示到編輯器中的進(jìn)行額外一些操作的功能。處于安全考慮，目前UEditor僅實(shí)現(xiàn)了圖片二次插入操作，其他諸如刪除、移動等操作將會在后續(xù)二次開發(fā)教程中陸續(xù)放出。

2、注意事項(xiàng)

????圖片在線管理需要配置的參數(shù)跟遠(yuǎn)程圖片抓取一致，兩者不同的地方是圖片在 線管理中的圖片數(shù)據(jù)是由服務(wù)器端指定某個目錄，然后遍歷其下的所有圖片文件得到，然后將地址返回給編輯器，而遠(yuǎn)程圖片抓取則是由編輯器提交圖片地址，經(jīng)過 服務(wù)器端的抓取處理后返回新的地址給編輯器。兩者的初始觸發(fā)都需要ajax的介入。

六、屏幕截圖交互

1、屏幕截圖介紹?

????使用了ActiveX控件，目前只支持IE瀏覽器。

2、注意事項(xiàng)

????需要配置的參數(shù)除了跟圖片上傳一樣的內(nèi)容之外，還多出了服務(wù)器地址和端口的配置。具體使用時請根據(jù)自身服務(wù)器的特點(diǎn)做出適應(yīng)修改。

七、附件上傳交互

1、附件上傳注意事項(xiàng)

????附件上傳的基本配置跟圖片類似。另外，由于附件上傳采用了相當(dāng)成熟的swfupload開源框架，因此大部分的文檔和資料盡可參考swfupload的官網(wǎng)教程。官網(wǎng)地址：http：//www.swfupload.org

完整版的部署與體驗(yàn)

2012-05-11 16:16:57

一、官網(wǎng)上下載完整源碼包，解壓到任意目錄，解壓后的源碼目錄結(jié)構(gòu)如下所示：

????_examples：編輯器完整版的示例頁面

????_demos：編輯器的各種使用案例

????dialogs：彈出對話框?qū)?yīng)的資源和JS文件

????themes：樣式圖片和樣式文件

????server：涉及到服務(wù)器端操作的PHP、JSP等文件

????third-party：第三方插件

????editor_all.js：_src目錄下所有文件的打包文件

????editor_all_min.js：editor_all.js文件的壓縮版，建議在正式部署時才采用

????editor_config.js：編輯器的配置文件，建議和編輯器實(shí)例化頁面置于同一目錄

二、部署UEditor到實(shí)際項(xiàng)目(UETest)中的步驟:

????????????圖表?1

第一步：在項(xiàng)目的任一文件夾中建立一個用于存放UEditor相關(guān)資源和文件的目錄，此處在項(xiàng)目根目錄下建立，起名為ueditor。

第二步：拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。其中，除了ueditor目錄之外的其余文件均為具體項(xiàng)目文件，此處所列僅供示例。

第三步：為簡單起見，此處將以根目錄下的index.php頁面作為編輯器的實(shí)例化頁面，用來展示UEditor的完整版效果。在index.php文件中，首先導(dǎo)入編輯器需要的三個入口文件，示例代碼如下：

第四步：然后在index.php文件中創(chuàng)建編輯器實(shí)例及其DOM容器。具體代碼示例如下：

最后一步：?在/UETest/ueditor/?editor_config.js中查找URL變量配置編輯器在你項(xiàng)目中的路徑。

至此，一個完整的編輯器實(shí)例就已經(jīng)部署到咱們的項(xiàng)目中了！在瀏覽器中輸入http://localhost/UETest?運(yùn)行下試試UE強(qiáng)大的功能吧！?

三、注意事項(xiàng)

1.在引用editor_config.js時，最好先于editor_all.js加載，否則特定情況下可能會出現(xiàn)報錯。

2.若希望給編輯器賦初值，請將上面描述index.php的div換成初始內(nèi)容

3.?需要注意的是編輯器資源文件根路徑。它所表示的含義是：以編輯器實(shí)例化頁面 為當(dāng)前路徑，指向編輯器資源文件(即dialog等文件夾)的路徑。鑒于很多同學(xué)在使用編輯器的時候出現(xiàn)的種種路徑問題，此處強(qiáng)烈建議大家使用"相對于網(wǎng) 站根目錄的相對路徑"進(jìn)行配置。"相對于網(wǎng)站根目錄的相對路徑"也就是以斜杠開頭的形如"/UETest/ueditor/"這樣的路徑。

此外如果你使用的是相對路徑,例如"ueditor/"(相對于圖表1路徑結(jié)構(gòu))

如果站點(diǎn)中有多個不在同一層級的頁面需要實(shí)例化編輯器，且引用了同一UEditor的時候，可能不適用于每個頁面的編輯器。因此，UEditor提供了針對不同頁面的編輯器可單獨(dú)配置的根路徑，具體來說，在需要實(shí)例化編輯器的頁面最頂部寫上如下代碼即可。

當(dāng)然，需要令此處的URL等于對應(yīng)的配置。window.UEDITOR_HOME_URL?="/xxxx/xxxx/";