1. 程式人生 > >Ueditor1.4.3百度編輯器配置(包括上傳圖片)的使用心得

Ueditor1.4.3百度編輯器配置(包括上傳圖片)的使用心得

第一次使用Ueditor,遇到很多問題,我使用的是開發版Ueditor1.4.3jsp的UTF-8版本的,java框架是spring MVC

(一)

1)首先第一步去到http://ueditor.baidu.com/website/download.html下載並解壓


2)在eclipse中新建一個專案,將Ueditor檔案複製到webapp資料夾下:


3)在jsp頁面上引用Ueditor相關的js檔案


4)匯入UEditor的jar包(在Ueditor/jsp/lib下有5個jar包)

我是將jar包寫在了pom.xml檔案中,就不需要再次匯入了,



注意的是還有一個Ueditor-1.1.2.jar這個檔案沒有寫在pom.xml檔案中,我是將它仍然放在了Ueditor/jsp/lib下,但是我通過svn將程式碼更新後,小夥伴並不能正常使用Ueditor,後臺會報錯,意思是沒有讀到controller.jsp中的內容,表示Ueditor-1.1.2.jar這個jar包雖然匯入了,但是並沒有起到作用,於是用了另外一個方法:

將Ueditor/jsp/lib下的這個jar包複製到WEB-INF下的lib資料夾中(小夥伴們如果用的不是我上面的方法匯入jar包可以將jar包都複製到這個WEB-INF的lib資料夾下),如果你的專案WEB-INF下沒有lib資料夾,可以自己新建一個


5)在jsp頁面中寫一個<textarea>標籤


在jsp頁面中的<script>標籤中例項化編輯器,如果例項化出錯,會導致編輯器的工具欄不顯示,其中toolBars中的內容可以根據你的實際需要進行新增,如果沒有新增的話,預設顯示所有。

在使用過程中遇到了一個問題:同一個頁面開啟編輯器使用後關閉,再開啟會出現工具欄又不顯示了,於是我加了兩句話,就是一下的第一句和最後一句。


完成以上的配置就可以正常的使用Ueditor百度編輯器了。

(二)

下面講一下遇到的其他一些問題:

1)在使用編輯器時,會出現點選新增圖片或者新增附件時發現沒有反應,其實是因為被編輯器的圖層給覆蓋了,修改一下如下:

在ueditor.config.js中的zIndex:的值修改為999999如果還是不可以的話,可以多加幾個9,一定可以的,哈哈

2)在使用編輯器的時候發現儲存的內容不能完整,後來發現原來是因為我把編輯器中的內容通過url來傳值的原因,如果放在form中通過post提交的話是沒有問題的。

(三)

下面這部分呢,來講下編輯器的上傳圖片的功能,在官方檔案中沒有詳細的介紹怎麼配置上傳圖片的方法

1)在ueditor/jsp下的config.json檔案中修改 "imageUrlPrefix"和"imagePathFormat"

相對路徑:

"imageUrlPrefix":“/專案名稱”,

絕對路徑:

"imageUrlPrefix":“http://localhost:8080/專案名稱”,/*其中localhost可以修改為對應的伺服器地址*/

"imagePathFormat"這個屬性要注意,可以使用預設的路徑,但是我使用預設的路徑時出現了一個問題,一開始我找不到我上傳的圖片在哪裡,後來發現是在tomcat的webapps資料夾下的專案中,但是找到位置之後,我上傳了圖片,第二天開啟電腦發現圖片都不顯示了,資料夾下圖片都空了,原因是因為tomcat重啟的時候會將這些臨時檔案都清空,所以就沒有了,那怎麼辦呢?於是我就修改了這個地址將圖片上傳到和專案檔案平行的資料夾下,比如:

"imagePathFormat": "/../temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */

這樣做,圖片就不會被刪除了,啦啦啦啦啦啦,這個研究了挺久的呢,百度上這個問題的具體解答例子都沒有,只是說修改路徑修改路徑的

2)修改ueditor-config.js

第22行:


 var URL = window.UEDITOR_HOME_URL || "/專案名稱/ueditor/";

第33行:


通過以上的講解,編輯器的功能都可以實現了,附件上傳和圖片上傳如出一轍,把附件上傳的路徑照著圖片上傳的來修改就OK了,完美!大家有什麼問題可以和我交流哦,其實我是新手的!嘻嘻。