UEditor百度編輯器

第一步：首先下載ueditor編譯器，地址：http://ueditor.baidu.com/website/

下載完解壓以後就這個：

第二步：我會把文件名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轉發後的效果

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

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

好了，圖片上傳到此搞定，但願小夥伴們也能成功實現，固然若有問題能夠留言，一塊兒討論。