ueditor使用心得

UEditor使用手冊

1. 配置jdk 1.6+
2. Apache Tomcat6.0+
3. Ueditor官網下載

 

部署

1. 安裝好jdk和apache後，咱們開始部署代碼
2. 咱們在apache的安裝目錄下，找到webapps的這個文件夾，以下圖1-1所示，而後咱們將官網上下載的ueditor放到webapps下，官網上下載的代碼多是外面包了文件夾，咱們只保留最底層的文件夾，例如圖1-2

 

圖1-1

 

圖1-2

1. 而後咱們在utf8-jsp這個文件夾裏建一個新的文件夾WEB-INF，如圖1-3所示，它裏面包括lib文件夾，同時將jsp文件夾下的lib文件夾下的全部jar包複製到咱們本身新建的WEB-INF下的lib裏，如圖1-4所示。

 

圖1-3

 

圖1-4

1. 到這裏咱們基本就部署完畢了，這個時候啓動tomcat,就是bin文件夾下的startup.bat,這裏需注意咱們的nginx是否啓動，若是啓動必定要關掉，否則tomcat會報錯。
2. 若是你不想採用這種方式來配置，那咱們能夠用nginx代理來搞這件事，好比我找到了一個域名，以cmpwriter.jd.com爲例，我配置了相關信息以下圖1-5所示。同時在host文件中添加127.0.0.1。

 

圖1-5

 

1. 初始化

咱們在頁面引入相關文件，而後利用工廠模式初始化編輯器。

 

1. 配置項更改

Ueditor.config.js中，能夠對工具欄想要選擇的按鈕進行自行選擇，同時文件中還有其餘配置項能夠自行配置，註釋很清楚，例如主題配置項，自動保存開啓等等，配置的參數通常爲默認值，及時註釋也會按照默認值來配置。

 

也能夠經過實例化時傳入參數，這種更好些，例子以下

 

1. 自定義配置按鈕

首先咱們將按鈕圖片放在themes下的images下，而後能夠選擇在源碼中修改，但不建議這種修改方式，此處不過多介紹。能夠從新寫一個js用作編輯器的配置。以下

 

Showproductwin是對這個按鈕進行各類操做的一個函數，我這裏是對編輯器內容增長，在這個函數裏，必須存在的是參數fn，以及對fn的執行，看到紅線框部分的內容實際上是一個字符串。他會執行按鈕註冊時的方法，將這個字符串經過inserthtml插入到編輯器中，這是最經常使用的方式沒有之一。

UEditor提供了registerUI這個接口，能夠動態的注入擴展的內容。

uiname,是你爲新添加的UI起的名字，這裏能夠是1個或者多個，「uiname」後者是「uiname1 uiname2 uiname3」。function，是實際你要作的事情，這裏提供兩個參數，editor是編輯器實例，若是你有多個編輯器實例，那每一個編輯器實例化後，都會調用這個function,而且把editor傳進來

uiname,你爲ui起的名字，若是前邊你添加的是多個的化，這裏function會被調用屢次，而且將每個ui名字傳遞進來.

若是函數返回了一個UI 實例，那這個UI實例就會被默認加到工具欄上。固然也能夠不返回任何UI。好比但願監控selectionchange事件，在某些場景下彈出浮層，這時就不須要返回任何UI.

index,是你想放到toolbar的那個位置，默認是放到最後editorId,當你的頁面上有多個編輯器實例時，你想將這個ui擴展到那個編輯器實例上，這裏的editorId是給你編輯器初始化時，傳入的id,默認是每一個實例都會加入你的擴展

1. 二次開發組件化

好比咱們在編輯器內插入一段商品詳情，咱們會發如今刪除的時候，並不能直接刪除這一塊商品詳情，由於ueditor將這一部分的內容轉換成了html，因此咱們須要給這一部分的內容加上以下屬性：

tabindex=「-1」

contenteditable=「false」

ondrag=「return false」

ondragstart=「return false」

而後再是一下你會發現頁面元素並無加上，這是由於ueditor對自定義屬性標籤作了限制，因此咱們去找到ueditor.config.js裏找到whitList,找到你想要設置的標籤，在後面加上這些屬性便可

同時要將阻止div標籤變成p標籤，UEditor對於進入編輯器中的數據進行的過濾處理。在UEditor中表示段落的標籤是p標籤，不少的編輯操做都是基於p標籤進行的處理。allowDivTransToP: false便可

1. 圖片上傳路徑配置

 

常常會發現已啓動的時候瘋狂報錯，什麼後端配置項不正確，圖片上傳成功但顯示不出來，不要怕，很正常。打開上述文件，會發現不少配置項，以下圖所示：

 

這裏能夠一頓配置，imageUrlPrefix的意思就是圖片訪問路徑前綴，若是圖片顯示不出來就是這個玩意沒配對。