UEditor之實現配置簡單的圖片上傳示例
開心一笑
下班後，阿華到樓下小超市買毛巾，剛買完出來，就遇到同一辦公樓裡另一家公司的阿菲，之前與她遠遠的有過幾次眼神交流，但從沒說過話，“買毛巾啊”，看著阿華手裡的毛巾，阿菲先開口了。
阿華回到：“是啊，這裡的老闆眼神太好了，我不敢偷，就只有買了。”
阿菲一下就哈哈笑了，配合到：“哇，原來你是小偷。”
阿華：“噓，小聲點，其實主要原因是……”阿華指著自己的腦袋接著說到：“你看，我是個有頭有臉的人，所以還是要用用毛巾的。”
視訊教程
CSDN學院：
騰訊學院：
網易學院：
提出問題
Ueditor簡單介紹和實現圖片上傳功能？？？？
讀書感悟
前提：
- 假如你已經安裝tomcat伺服器；
- 假如你已經把專案執行到Eclipse上；
- 假如你已經有java基礎；
- 假如你對js有一定基礎；
- 假如你已經下載ueditor1_4_3_3-src原始碼，記得是開發的哦;
那麼開始吧!
1.首先你可以到官網Ueditor，檢視很詳細的文件，包括如何安裝到Eclipse，相關jar包和如何使用Ueditor，本文主要介紹如何實現單圖片上傳和利用自己的介面：
執行tomcat上，在google瀏覽器執行（Test是我的專案名稱）：
http://localhost:8081/Test/jsp/config.json
出現一串長長的json的字串，說明執行成功。
2.把WEB-INF/jsp/src下的java原始碼copy到專案原始碼中，方便之後的除錯程式碼，如上圖
<!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，下面介紹，不過會把所有的按鈕全部顯示出來
如圖：
5.可是你會發現，點選圖片上傳按鈕，一點反應都沒有，尼瑪有木有！
這裡開始介紹ueditor.config.js檔案，
首先，你會發現在這個檔案可以配置很多，具體看下面即可
重點講：serverUrl: URL + “php/controller.php”，沒錯，你沒有看錯，這個就是請求後端的統一介面路徑，記得是統一介面路徑，也就是說只有這個路徑，沒有第二個，會不會覺得很坑呢？
我們把路徑改成jsp的：, serverUrl: URL + “jsp/controller.jsp”
我們把註釋去掉，重新啟動tomcat，重新整理頁面，點選圖片上傳按鈕，
window.UEDITOR_CONFIG = {
//為編輯器例項新增一個路徑，這個不能被註釋
UEDITOR_HOME_URL: URL
// 伺服器統一請求介面路徑
, serverUrl: URL + "php/controller.php"
//工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的例項時選擇自己需要的重新定義
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'drafts', 'help'
]]
//當滑鼠放在工具欄上時顯示的tooltip提示,留空支援自動多語言配置，否則以配置值為準
//,labelMap:{
// 'anchor':'', 'undo':''
//}
//語言配置項,預設是zh-cn。有需要的話也可以使用如下這樣的方式來自動多語言切換，當然，前提條件是lang資料夾下存在對應的語言檔案：
//lang值也可以通過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,langPath:URL +"lang/"
//主題配置項,預設是default。有需要的話也可以使用如下這樣的方式來自動多主題切換，當然，前提條件是themes資料夾下存在對應的主題檔案：
//現有如下面板:default
//,theme:'default'
//,themePath:URL +"themes/"
//,zIndex : 900 //編輯器層級的基數,預設是900
//針對getAllHtml方法，會在對應的head標籤中增加該編碼設定。
//,charset:"utf-8"
//若例項化編輯器的頁面手動修改的domain，此處需要設定為true
//,customDomain:false
//常用配置專案
//,isShow : true //預設顯示編輯器
//,textarea:'editorValue' // 提交表單時，伺服器獲取編輯器提交內容的所用的引數，多例項時可以給容器name屬性，會將name給定的值最為每個例項的鍵值，不用每次例項化的時候都設定這個值
//,initialContent:'歡迎使用ueditor!' //初始化編輯器的內容,也可以通過textarea/script給值，看官網例子
6.你會發現，你選擇一張圖片，我卡，圖片上傳不了
開啟google瀏覽器除錯，如下圖：
7.說明還有些配置檔案還沒配好，我們看剛剛配置的後端請求路徑
// 伺服器統一請求介面路徑
, serverUrl: URL + "jsp/controller.jsp"
記住，大家要把這個檔案當作後端的java檔案，一定要記住，很重要的。
controller.jsp會返回同目錄下的config.json檔案，大家要把它當作是後端返回的資料即可
這時，我們先看config.json檔案:
只看部分配置，下面的配置都很重要，但我們先解決上面出現的問題：
上面的問題應該是圖片的路徑不對造成的，所以我們修改配置：imageUrlPrefix，把他改成下面的配置,重啟，重新整理：
"imageUrlPrefix" = http://localhost:8081/Test/
/* 前後端通訊相關的配置,註釋只允許使用多行方式 */
{
/* 上傳圖片配置項 */
"imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,預設是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageUrlPrefix": "http://localhost:8081/Test/", /* 圖片訪問路徑字首 */
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
/* {filename} 會替換成原檔名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鐘 */
/* {ss} 會替換成兩位秒 */
/* 非法字元 \ : * ? " < > | */
/* 具請體看線上文件: fex.baidu.com/ueditor/#use-format_upload_filename */
圖片如下：
8.結束，可是這樣真的夠嗎，夠嗎，夠嗎，爽嗎，爽嗎，爽嗎 重要的事說三遍？？？？
請看下一章《UEditor之基於Java圖片上傳前後端原始碼研究》
讀書感悟
來自《天空之城》
- 越是試著忘記，越是記得深刻；有時候堅持你最不想做的事之後，變可得到你最想要的東西。
- 迷倒我的不是彩虹，而是在我面前，看彩虹的人。
- 誰在夢，誰沉醉，誰在醒，誰笑，誰心痛，誰站在城中等著你，誰在城外等我，看天空之城的焰火，照亮的是寂寞
個人感悟
其他
如果有帶給你一絲絲小快樂，就讓快樂繼續傳遞下去，歡迎轉載，點贊，頂，歡迎留下寶貴的意見，多謝支援！