文本編輯器插件的使用

　　首先聲明一下，本人新手菜鳥一枚。註冊博客園以後，因工做須要，稍微研究了下文本編輯器插件的使用，固做爲隨筆記錄下來。若有不對之處，望你們多多指點。固然內容也是參考如下連接地址而來的。

　　

詳見如下連接地址：

http://blog.csdn.net/xiaoxian8023/article/details/35796827

 

實現以下功能時（在頁面中添加一個文本編輯器）：

 

第一步：下載該編輯器的插件

首先下載到 ueditor1_4_3-utf8-jsp.rar，鏈接地址是：http://ueditor.baidu.com/website/。我選擇的是utf-8版本的

 

第二步：解壓之後總體拷貝到Java web項目的網頁根目錄下。

我這裏是用myeclipse建的項目，因此把ueditor拷貝到了WebRoot下便可。引用ueditor/jsp/lib下的jar包。你能夠選擇直接在java Build Path中配置，或者直接放入WebRoot/WEB-INF/lib文件夾中，項目會自動引用該文件夾下的jar。推薦使用直接放到WEB-INF/lib下，這樣你的jar是隨着項目移動的，系統會按照相對路徑加載項目下的jar。若是選擇第一種，若是當jar文件移動了，那麼這個功能就會失效的。

 

第三步，在頁面上引入2個js文件

1. <scripttype="text/javascript"src="ueditor/ueditor.config.js"></script>  
2. <scripttype="text/javascript"src="ueditor/ueditor.all.js"></script>  
3. <textareanametextareaname="content" id="myEditor"></textarea>  
4.  <scripttypescripttype="text/javascript">  
5.  UEDITOR_CONFIG.UEDITOR_HOME_URL = './ueditor/'; //必定要用這句話，不然你須要去ueditor.config.js修改路徑的配置信息  
6.  UE.getEditor('myEditor');  
7.  </script>  

第四步，在頁面的編輯器位置，添加html代碼

 第五步，ueditor支持圖片、文檔、音樂等文件上傳功能，若是你想要配置上傳路徑，可以修改 ueditor/jsp/config.json。

    這個文件對於每個配置項，都明確的文字說明。附上一段圖片上傳的配置吧：

1.  /* 上傳圖片配置項 */  
2. "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */  
3. "imageFieldName": "upfile", /* 提交的圖片表單名稱 */  
4. "imageMaxSize": 2048000, /* 上傳大小限制，單位B */  
5. "imageAllowFiles": [".png", ".jpg",".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */  
6. "imageCompressEnable": true, /* 是否壓縮圖片,默認是true*/  
7. "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */  
8. "imageInsertAlign": "none", /* 插入的圖片浮動方式 */  
9. "imageUrlPrefix": "", /* 圖片訪問路徑前綴 */  

　　10. "imagePathFormat":"_images/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */  

第六步，ueditor支持自定義功能，界面上顯示的功能都是可配置的，只要在ueditor/ueditor.config.js的toolbar中刪改配置便可，代碼以下：

1. //工具欄上的全部的功能按鈕和下拉框，能夠在new編輯器的實例時選擇本身須要的重新定義   
2.        , toolbars: [[   
3.            'fullscreen', 'source', '|', 'undo', 'redo', '|',   
4.            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',   
5.            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',   
6.            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',   
7.            'directionalityltr', 'directionalityrtl', 'indent', '|',   
8.            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',   
9.            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',   
10. 10.            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',   
11. 11.            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',   
12. 12.            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',   
13. 13.            'searchreplace', 'help', 'drafts'   
14. 14.        ]]  

 

 如下問題其實在上面都有提示，可是我是以一個菜鳥的身份來寫這個隨筆的。說實話這些問題我是一個一個解決以後，看第二遍上面的內容時才發現原來都有的。因此有新的菜鳥或者粗枝大葉的人看個人這篇隨筆，我以爲可以讓你們更加一目瞭然點。

如下是可能出現的問題

第一個錯誤

 

 

下圖爲解決步驟，只要將ueditor的jar包加上便可。

 

 

第二個錯誤

An error occurred at line: 12 in the jsp file: /ueditor/jsp/controller.jsp

保存時找不到這個jsp，須要將ueditor中的jar包徹底導入進去，同第一個錯誤的解決方式。不一樣的是須要將以下圖五個jar包所有倒入進去，

 

 

而後將這五個jar包放到WEB-INF下的lib文件夾中

 

 

第三個錯誤：

在jsp中引入這這兩個js的時候必定要按照這個順序引，否則也不會顯示，引入jar包的順序很重要啊

 

 

 

本身定義編輯器須要的內容

 

 

 

取得編輯器的內容

var content = UE.getEditor('editor').getContent();

圖片上傳時報錯：ueditor中FileUtils.getTempDirectory()找不到

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

2014 - 6 - 27  14 : 22 : 25  org.apache.catalina.core.StandardWrapperValve invoke SEVERE: Servlet.service()  for  servlet jsp threw exception Throwable occurred: java.lang.NoSuchMethodError: org/apache/commons/io/FileUtils.getTempDirectory()Ljava/io/File; at com.baidu.ueditor.upload.StorageManager.getTmpFile(StorageManager.java: 117 ) at com.baidu.ueditor.upload.StorageManager.saveFileByInputStream(StorageManager.java: 51 ) at com.baidu.ueditor.upload.BinaryUploader.save(BinaryUploader.java: 75 ) at com.baidu.ueditor.upload.Uploader.doExec(Uploader.java: 24 ) at com.baidu.ueditor.ActionEnter.invoke(ActionEnter.java: 80 ) at com.baidu.ueditor.ActionEnter.exec(ActionEnter.java: 49 ) at org.apache.jsp.core.ueditor.jsp.controller_jsp._jspService(controller_jsp.java: 74 ) at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java: 70 ) at javax.servlet.http.HttpServlet.service(HttpServlet.java: 803 ) at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java: 374 ) at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java: 337 ) at org.apache.jasper.servlet.JspServlet.service(JspServlet.java: 266 ) at javax.servlet.http.HttpServlet.service(HttpServlet.java: 803 )

　　

確定是jar包的問題的，ueditor1.4.3須要commons-io-2.4.jar 

因爲原來的項目中的jars是commons-io-1.4.jar，故出現問題  

若是仍是報錯，查看編譯後的文件，是否仍是原來的jar