百度UEditor插件配置圖片上傳問題
前言：之前第一次用到UEditor插件的時候，一臉懵逼！沒錯就是一臉懵逼，去UEditor插件官網下載了一個開發版的。然后對於新鮮技術好奇，本人就迫不及待的把它copy到了我的項目里，運行之后發現鼠標點到輸入框里面的時候，什么鬼啊，握了棵草！上傳圖片的插件置灰了如下圖1，一看還有一個多圖片上傳的插件還在，就趕緊點了一下，點開的那一瞬間我吃了一鯨，如下圖2！
圖1
圖2
很好！下面看一下如何解決這個問題。
1.首先你可以到官網Ueditor，查看很詳細的文檔，包括如何安裝到Eclipse，相關jar包和如何使用Ueditor，本文主要介紹如何實現單圖片上傳！
2.把WEB-INF/jsp/src下的java源碼copy到項目源碼中，方便之后的調試代碼，如下圖：
3.運行http://localhost:8082/testUEditor/_examples/simpleDemo.html，可以打開看下這個文件:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
</head>
<body>
<h1>UEditor簡單功能</h1>
<!--style給定寬度可以影響編輯器的最終寬度-->
<script type="text/plain" id="myEditor">
<p>這里我可以寫一些輸入提示</p>
</script>
<script type="text/javascript">
UE.getEditor('myEditor',{
//這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下五個
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','test']],
//focus時自動清空初始化時的內容
autoClearinitialContent:true,
//關閉字數統計
wordCount:false,
//關閉elementPath
elementPathEnabled:false,
//默認的編輯區域高度
initialFrameHeight:300
//更多其他參數，請參考ueditor.config.js中的配置項
})
</script>
</body>
</html>
上面例子很簡單，就是如何初始化一個富文本框，已經如何配置工具條等等
4.因為我們要實現圖片上傳功能，所有要把圖片上傳按鈕搞上去，方法如下:
1）第一種方法：把simpleupload加到toolbars中:
toolbars:[['FullScreen',simpleupload ,'Source', 'Undo', 'Redo','Bold','test']]
2）第二種方法：直接把toolbars注釋掉
這時就會讀取默認的配置文件ueditor.config.js，下面介紹，不過會把所有的按鈕全部顯示出來
重新運行http://localhost:8082/Test/_examples/simpleDemo.html
如下圖：
5.這時你就會發現，我之前遭遇的奇葩事情發生了，點擊圖片上傳按鈕，一點反應都沒有，如果你鼠標點了一下輸入框，按鈕還給置灰了！
這里開始介紹ueditor.config.js文件，
首先，你會發現在這個文件可以配置很多，具體看下面即可
重點講：serverUrl: URL + “PHP/controller.php”，這個就是請求后端的統一接口路徑，記得是統一接口路徑，也就是說只有這個路徑，沒有第二個。
我們把路徑改成jsp的：, serverUrl: URL + “jsp/controller.jsp”
我們把注釋去掉，重新啟動tomcat，刷新頁面，點擊圖片上傳按鈕
看完上面這個圖，是不是感覺成功了，哈哈哈哈.....並沒有！是不是很坑大表弟？看下圖，選完圖片的效果
大家可以看到圖片沒有正常顯示出來，人家官網可是能看到圖的。還能不能愉快的玩耍了？？？
6.說明還有些配置文件還沒配好，我們看剛剛配置的后端請求路徑
// 服務器統一請求接口路徑
, serverUrl: URL + "jsp/controller.jsp"
記住，大家要把這個文件當作后端的java文件，一定要記住，很重要的。
controller.jsp會返回同目錄下的config.json文件，大家要把它當作是后端返回的數據即可
這時，我們先看config.json文件:
只看部分配置，下面的配置都很重要，但我們先解決上面出現的問題：
上面的問題應該是圖片的路徑不對造成的，所以我們修改配置：imageUrlPrefix，把他改成下面的配置,重啟，刷新：
"imageUrlPrefix" = http://localhost:8082/testUEditor/
重新訪問一下，效果如下圖：
完美~perfect~成功的配置了圖片上傳！