開心一笑
下班后约郁，阿華到樓下小超市買毛巾，剛買完出來但两，
就遇到同一辦公樓里另一家公司的阿菲鬓梅，之前與她遠遠的有過幾次眼神交流，
但從沒說過話谨湘，“買毛巾啊”绽快，看著阿華手里的毛巾芥丧，阿菲先開口了。
阿華回到：“是啊坊罢，這里的老板眼神太好了续担，我不敢偷，就只有買了活孩∥镉觯”
阿菲一下就哈哈笑了，配合到：“哇憾儒，原來你是小偷询兴。”
阿華：“噓起趾，小聲點诗舰，其實主要原因是……”
阿華指著自己的腦袋接著說到：“你看，我是個有頭有臉的人训裆，
所以還是要用用毛巾的眶根。”
提出問題
Ueditor簡單介紹和實現(xiàn)圖片上傳功能边琉？汛闸？？艺骂？
解決問題
前提：
- 假如你已經(jīng)安裝tomcat服務(wù)器诸老；
- 假如你已經(jīng)把項目運行到Eclipse上；
- 假如你已經(jīng)有java基礎(chǔ)钳恕；
- 假如你對js有一定基礎(chǔ)别伏；
- 假如你已經(jīng)下載ueditor1_4_3_3-src源碼，記得是開發(fā)的哦;
那么開始吧!
1.首先你可以到官網(wǎng)Ueditor忧额，查看很詳細的文檔厘肮，包括如何安裝到Eclipse，相關(guān)jar包和如何使用Ueditor睦番，本文主要介紹如何實現(xiàn)單圖片上傳和利用自己的接口：
運行tomcat上类茂，在google瀏覽器運行（Test是我的項目名稱）：
http://localhost:8081/Test/jsp/config.json
出現(xiàn)一串長長的json的字符串，說明運行成功托嚣。
2.把WEB-INF/jsp/src下的java源碼copy到項目源碼中巩检，方便之后的調(diào)試代碼，如上圖
3.運行http://localhost:8081/Test/_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時自動清空初始化時的內(nèi)容
autoClearinitialContent:true,
//關(guān)閉字數(shù)統(tǒng)計
wordCount:false,
//關(guān)閉elementPath
elementPathEnabled:false,
//默認的編輯區(qū)域高度
initialFrameHeight:300
//更多其他參數(shù)兢哭，請參考ueditor.config.js中的配置項
})
</script>
</body>
</html>
上面例子很簡單，就是如何初始化一個富文本框夫嗓，已經(jīng)如何配置工具條等等
4.因為我們要實現(xiàn)圖片上傳功能迟螺，所有要把圖片上傳按鈕搞上去冲秽，方法如下:
1）第一種方法：把simpleupload加到toolbars中:
toolbars:[['FullScreen',simpleupload ,'Source', 'Undo', 'Redo','Bold','test']]
2）第二種方法：直接把toolbars注釋掉
這時就會讀取默認的配置文件ueditor.config.js，下面介紹矩父，不過會把所有的按鈕全部顯示出來
重新運行http://localhost:8081/Test/_examples/simpleDemo.html
如圖：
5.可是你會發(fā)現(xiàn)锉桑，點擊圖片上傳按鈕，一點反應(yīng)都沒有窍株，尼瑪有木有民轴！
這里開始介紹ueditor.config.js文件，
首先夹姥，你會發(fā)現(xiàn)在這個文件可以配置很多杉武，具體看下面即可
重點講：serverUrl: URL + "php/controller.php"辙诞，沒錯辙售，你沒有看錯，
這個就是請求后端的統(tǒng)一接口路徑飞涂，記得是統(tǒng)一接口路徑旦部，也就是說只有這個路徑，沒有第二個较店，會不會覺得很坑呢士八？
我們把路徑改成jsp的：, serverUrl: URL + "jsp/controller.jsp"
我們把注釋去掉，重新啟動tomcat梁呈，刷新頁面婚度，點擊圖片上傳按鈕，
window.UEDITOR_CONFIG = {
//為編輯器實例添加一個路徑官卡，這個不能被注釋
UEDITOR_HOME_URL: URL
// 服務(wù)器統(tǒng)一請求接口路徑
, 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文件夾下存在對應(yīng)的語言文件：
//lang值也可以通過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,langPath:URL +"lang/"
//主題配置項,默認是default毛秘。有需要的話也可以使用如下這樣的方式來自動多主題切換饭寺，當然，前提條件是themes文件夾下存在對應(yīng)的主題文件：
//現(xiàn)有如下皮膚:default
//,theme:'default'
//,themePath:URL +"themes/"
//,zIndex : 900 //編輯器層級的基數(shù),默認是900
//針對getAllHtml方法叫挟，會在對應(yīng)的head標簽中增加該編碼設(shè)置艰匙。
//,charset:"utf-8"
//若實例化編輯器的頁面手動修改的domain，此處需要設(shè)置為true
//,customDomain:false
//常用配置項目
//,isShow : true //默認顯示編輯器
//,textarea:'editorValue' // 提交表單時抹恳，服務(wù)器獲取編輯器提交內(nèi)容的所用的參數(shù)旬薯，多實例時可以給容器name屬性，會將name給定的值最為每個實例的鍵值适秩，不用每次實例化的時候都設(shè)置這個值
//,initialContent:'歡迎使用ueditor!' //初始化編輯器的內(nèi)容,也可以通過textarea/script給值绊序，看官網(wǎng)例子
6.你會發(fā)現(xiàn)硕舆，你選擇一張圖片，我卡骤公，圖片上傳不了
打開google瀏覽器調(diào)試抚官，如下圖：
7.說明還有些配置文件還沒配好，我們看剛剛配置的后端請求路徑
// 服務(wù)器統(tǒng)一請求接口路徑
, serverUrl: URL + "jsp/controller.jsp"
記住阶捆，大家要把這個文件當作后端的java文件凌节，一定要記住，很重要的洒试。
controller.jsp會返回同目錄下的config.json文件倍奢，大家要把它當作是后端返回的數(shù)據(jù)即可
這時，我們先看config.json文件:
只看部分配置垒棋，下面的配置都很重要卒煞，但我們先解決上面出現(xiàn)的問題：
上面的問題應(yīng)該是圖片的路徑不對造成的，所有我沒修改配置：imageUrlPrefix叼架，把他改成,重啟畔裕，刷新：
"imageUrlPrefix" = http://localhost:8081/Test/
/* 前后端通信相關(guān)的配置,注釋只允許使用多行方式 */
{
/* 上傳圖片配置項 */
"imageActionName": "uploadimage", /* 執(zhí)行上傳圖片的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} 會替換成隨機數(shù),后面的數(shù)字是隨機數(shù)的位數(shù) */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鐘 */
/* {ss} 會替換成兩位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */
圖片如下：
8.結(jié)束聂受，可是這樣真的夠嗎，夠嗎贞让，夠嗎乍构，爽嗎甜无，爽嗎，爽嗎 重要的事說三遍哥遮？岂丘？？昔善？
請看下一章《UEditor之基于Java圖片上傳前后端源碼研究》
讀書感悟
來自《天空之城》
- 越是試著忘記元潘，越是記得深刻；有時候堅持你最不想做的事之后君仆，變可得到你最想要的東西翩概。
- 迷倒我的不是彩虹，而是在我面前返咱，看彩虹的人钥庇。
- 誰在夢，誰沉醉咖摹，誰在醒评姨，誰笑，誰心痛，誰站在城中等著你吐句，誰在城外等我胁后，看天空之城的焰火，照亮的是寂寞
