1.去官網下載jsp版本的UEditor http://ueditor.baidu.com/webs...(注意下載開發版,mini版可能會有坑,我這裏下載的是1.4.3.3)
2.WebContent下新建一個文件夾ueditor,把下載下來解壓的文件所有放到這個文件夾下javascript
3.把jar包複製到WEB-INF下的lib下
4.在須要引入編輯器的頁面引入js(路徑本身找)html
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
5.在body中引入編輯器及樣式()java
<textarea id="myEditor" name="content" style="width:900px;height:300px;"> </textarea> <script type="text/javascript"> var editor =UE.getEditor('myEditor', { toolbars: [ ['redo','undo','bold','indent','italic','selectall','pasteplain','date', 'justifyleft','justifyright','justifycenter','justifyjustify','forecolor', 'directionalityltr','directionalityrtl','rowspacingtop','rowspacingbottom', 'lineheight'] ], initialFrameHeight: 250, initialFrameWeight: 80 }); </script>
6.打開jsp/config.json文件
(1)imageUrlPrefix是圖片訪問路徑前綴,ueditor會在每次訪問圖片時加上這個前綴;我在這裏把他設爲了本地的一個目錄"/images"
(2)修改imagePathFormat,這裏其實就是定義文件的名字,這裏我寫成了"/{yyyy}{mm}{dd}/{time}{rand:6}"
(3)添加localSavePathPrefix "localSavePathPrefix":"E:/images",
這個是我本身定義的一個參數,修改ueditor-1.1.2.jar中ConfigManager.class的getConfig(int
type)方法,添 加了一句:web
rootPath = jsonConfig.getString("localSavePathPrefix");
不想本身反編譯修改代碼的話能夠直接去這裏下載jar包:https://download.csdn.net/dow...json
7.controller層新建UEditorController.java,添加以下代碼tomcat
@Controller @RequestMapping("/ue") public class UEditorController { @RequestMapping(value="/config") public void config(HttpServletRequest request, HttpServletResponse response) { response.setContentType("application/json"); String rootPath = request.getSession() .getServletContext().getRealPath("/"); try { String exec = new ActionEnter(request, rootPath).exec(); PrintWriter writer = response.getWriter(); writer.write(exec); writer.flush(); writer.close(); } catch (IOException e) { e.printStackTrace(); } } }
而後圖片就能夠實現上傳了:app
8.這時你發現圖片雖然能傳上去但不能回顯,這是由於默認的訪問爲http訪問,能夠在tomcat的server.xml中host間添加以下:jsp
<Context path="/images" debug="0" docBase="E:/images/" reloadable="true" />
因而發現,帥氣的卡卡出現了編輯器