一次老大讓我把文字的編輯區域加一個富文字編譯器，於是馬上下載了一個kindEditor來試試，但後來老大推薦說百度的ueditor編譯器不錯，於是我便懷著擴充套件知識，又學到一個新東西的心理下載了百度的ueidtor編譯器，整合到專案中感覺確實不錯，今天就和大家分享下這個富文字編譯器的使用……

下載完解壓之後就這個：

第二步：我會把檔名utf-8-jsp這個檔名改為ueditor，然後把這個ueditor資料夾拷貝到專案的webapp目錄下

其中的zh-ch.js我是從lang資料夾裡面拷貝出來的，目的是為了方便引入，不拷貝出來完全可以，到時候引入jsp的時候注意下路徑就好了。

第三步：當然是要匯入這個編譯器所需要的依賴了，在ueditor/jsp/lib下

因為我用的是maven搭建的專案，所以直接引入各個jar包的座標就可以了，其中ueditor-1.1.2的座標找不到，我就把這個jar新增到我的私服中去了，然後通過私服下載，當然也可以有其他的方式引入這個jar包，網上一搜一大把。

第四步：然後就是在指定的jsp頁面中引入三個js,分別是ueditor.all.js和ueditor.config.js和zh-cn.js,其中ueditor.all.js官網是建議用ueditor.all.min.js，但是匯入專案時這個ueditor.all.min.js會報錯，我就直接用ueditor.all.js了，內容都一樣，只不過檔案大一點點。無關緊要啦。

第五步：通過上面的步驟之後基本的環境就已經搭完了，下面就是畫龍點睛之筆了，找到要新增編譯器的textarea標籤，獲取其id，在下面新增上這一段就歐了，效果立馬上演。

效果：

是不是很興奮，哈哈。

這樣基本的使用就完成了，為自己點贊吧。

===========================我是華麗的分割線===========================================

============================圖片上傳功能實現===========================================

通過以上的操作其實已經實現了最基本的百度編譯器的使用，但是圖片上傳基本功能裡面是沒有實現的，為了搞定這個圖片上傳的問題我也是走了一些彎路啊，特此寫下部落格，希望各位能少走一些彎路，同時自己也作為一個記錄吧。

圖片上傳也需要進行一些配置，主要就是config.json的配置了

預設的配置是這樣的：

因為這個上傳圖片的功能是自己在後臺寫的，所以要有一個訪問的路徑，

其中imageActionName就是你要上傳圖片時訪問的地址，不管你用的什麼框架，地址都得有，只不過配置的地方不一樣罷了。

imageUrlPrefix：這個我在專案中沒有配置，保持預設，沒有值，這個是圖片訪問的路徑字首，你一定會想為啥這個路徑可以是空呢？因為我在專案中已經有了配置，是一個域名，類似http://image.simple.com的地址。

imagePathFormat:這個路徑是圖片的儲存和訪問的路徑，你在後臺程式碼中配置了圖片儲存路徑就在這裡配置那個路徑就好了，雖然我這有說，但我絕對相信有小夥伴會配置有誤導致上傳圖片的各種問題，一定要仔細點，確保上傳的圖片就在這個指定的路徑下能找到，否則圖片上傳之後在編譯器裡面是顯示不出來的，而且會報上傳錯誤，但是圖片確實已經上傳了的現象。

我的是這樣配置的，可以參考下：

如果你定義了自己上傳圖片的地址，也就是imageActinName的值，你要在你自己那個jsp頁面指定ueditor訪問圖片上傳action的全路徑，如下：

這樣前臺都配置好了，那就看後臺上傳圖片的程式碼：

這樣圖片就可以上傳了，並且在編譯器中可以回顯了。

圖片上傳成功後檢視響應是這樣的格式：

{"title":"upfile","original":"news_content_9266655998.jpg","state":"SUCCESS","type":"image/jpeg","url"
:"http://image.simple.com/upload/news_content/4565/0579/news_content_3690037515.jpg","size":1890
}

其中的http://image.simple.com/是我我本機當成一個伺服器，並且把圖片存放在upload/new_content目錄中，當然這個地址http://image.simple.com/是我用nginx轉發後的效果

我的圖片是放在本機的這個目錄下的

------------------------------------------------------------------

好了，圖片上傳到此搞定，希望小夥伴們也能成功實現，當然如有問題可以留言，一起討論。