UEditor之實現配置簡單的圖片上傳示例
UEditor之實現配置簡單的圖片上傳示例
開心一笑
下班後，阿華到樓下小超市買毛巾，剛買完出來，就遇到同一辦公樓裏另外一家公司的阿菲，以前與她遠遠的有過幾回眼神交流，但從沒說過話，「買毛巾啊」，看着阿華手裏的毛巾，阿菲先開口了。
阿華回到：「是啊，這裏的老闆眼神太好了，我不敢偷，就只有買了。」
阿菲一下就哈哈笑了，配合到：「哇，原來你是小偷。」
阿華：「噓，小聲點，其實主要緣由是……」阿華指着本身的腦殼接着說到：「你看，我是個有頭有臉的人，因此仍是要用用毛巾的。」javascript
視頻教程
你們好，我錄製的視頻《Java之優雅編程之道》已經在CSDN學院發佈了，有興趣的同窗能夠購買觀看，相信你們必定會收穫到不少知識的。謝謝你們的支持……php
視頻地址：http://edu.csdn.net/lecturer/994html
提出問題
Ueditor簡單介紹和實現圖片上傳功能？？？？java
讀書感悟
前提：web
- 假如你已經安裝tomcat服務器；
- 假如你已經把項目運行到Eclipse上；
- 假如你已經有java基礎；
- 假如你對js有必定基礎；
- 假如你已經下載ueditor1_4_3_3-src源碼，記得是開發的哦;
那麼開始吧!編程
1.首先你能夠到官網Ueditor，查看很詳細的文檔，包括如何安裝到Eclipse，相關jar包和如何使用Ueditor，本文主要介紹如何實現單圖片上傳和利用本身的接口：json
運行tomcat上，在google瀏覽器運行（Test是個人項目名稱）：後端
http://localhost:8081/Test/jsp/config.json
- 1
- 2
出現一串長長的json的字符串，說明運行成功。api
2.把WEB-INF/jsp/src下的java源碼copy到項目源碼中，方便以後的調試代碼，如上圖瀏覽器
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時自動清空初始化時的內容
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:8081/Test/_examples/simpleDemo.html
如圖：
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圖片上傳先後端源碼研究》
讀書感悟
來自《天空之城》
- 越是試着忘記，越是記得深入；有時候堅持你最不想作的事以後，變可獲得你最想要的東西。
- 迷倒個人不是彩虹，而是在我面前，看彩虹的人。
- 誰在夢，誰沉醉，誰在醒，誰笑，誰心痛，誰站在城中等着你，誰在城外等我，看天空之城的焰火，照亮的是寂寞
我的感悟
其餘
若是有帶給你一絲絲小快樂，就讓快樂繼續傳遞下去，歡迎轉載，點贊，頂，歡迎留下寶貴的意見，多謝支持！
- 1. UEditor之實現配置簡單的圖片上傳示例 轉
- 2. UEditor之實現配置簡單的圖片上傳示例
- 3. ueditor上傳圖片設置的簡單實例
- 4. UEditor上傳圖片配置
- 5. ueditor 實現圖片上傳
- 6. Ueditor圖片上傳功能的配置
- 7. 簡單的PHP上傳圖片實例
- 8. SSM配置Ueditor實現圖片的上傳
- 9. Ueditor圖片上傳設置
- 10. ueditor 圖片上傳路徑配置
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • PHP 完整表單實例 - PHP教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。