ueditor下載好之后直接復制到項目的WebContent目錄下，並將ueditor\jsp\lib下的jar包復制或者剪切到項目的lib目錄下。先看一下效果，如下：
1.文件的上傳
首先在ueditor/jsp目錄下找到config.json文件，就拿Image上傳來說吧。
"imageUrlPrefix": "http://localhost:8080/HJZGG_BLOG", /* 圖片訪問路徑前綴 */。開始的時候imageUrlPrefix這個屬性值是空的。
另外一個就是"imagePathFormat": "/fileUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */。這個我已經改過了。
2.ueditor和struct2整合
如果項目中使用了Apache Struts2框架，將/* 過濾 ，由於該框架默認使用Apache的Commons FileUpload組件，和內建的FileUploadInterceptor攔截器實現文件上傳，將request中的文件域封裝到action中的一個File類型的屬性中，並刪除request中的原有文件域，這樣就會導致ueditor文件上傳不能成功。
解決辦法：重寫struct2的過濾器，對ueditor的請求不進行過濾。
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter; /** * Servlet Filter implementation class MyStrutsPrepareAndExecuteFilter */ public class MyStrutsPrepareAndExecuteFilter extends StrutsPrepareAndExecuteFilter{ public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest req = (HttpServletRequest) request; String url = req.getRequestURI(); if (url.contains("/ueditor/jsp/controller.jsp")) {//ueditor的不過濾 chain.doFilter(request, response); }else{ super.doFilter(request, response, chain); } } }
注意：只是重寫StrutsPrepareAndExecuteFilter的doFilter方法，不要重寫其他的，否則可能會出錯。
然后更改web.xml中filter的配置
<filter> <filter-name>struts2</filter-name> <filter-class>
<!--org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter 這是之前的配置-->
com.blog.filter.MyStrutsPrepareAndExecuteFilter </filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> </filter-mapping>
3.ueditor的初始化細節
從ueditor/index.html中可以看到，實例化編輯器， 建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例，即如下：
var ue = UE.getEditor('editor'), 我們可以找到函數的原型中還有一個參數，就是用來初始化ueditor的屬性的。函數原型位於ueditor.all.js中。
UE.getEditor = function (id, opt) { var editor = instances[id]; if (!editor) { editor = instances[id] = new UE.ui.Editor(opt); editor.render(id); } return editor; };
初始化，例如：var ue = UE.getEditor('editor', {initialFrameHeight:340,initialFrameWidth:760,maximumWords:1000,autoHeightEnabled:false});
我們定義了初始高度、初始寬度、最大輸入字數，不允許自動增高（尤其是最后這個，當你放入很大的圖片后，編輯框總是會變得很高）
如果我沒有設置autoHeightEnabled:false這個參數，編輯框總是會隨着圖片的拉伸變得很高。
4.解決ueditor上傳圖片后屬性title的內容
圖片上傳之后，鼠標放在圖片上，出現title屬性的內容，這個內容是圖片的隨機名稱，看着可不爽。
解決辦法：首先看你引用的是ueditor.all.js還是ueditor.all.min.js, 到相應的文件ctrl+F，尋找“loader.setAttribute('title', json.title || '')”,然后自己可以設置title的值。具體函數如下。
function callback(){ try{ var link, json, loader, body = (iframe.contentDocument || iframe.contentWindow.document).body, result = body.innerText || body.textContent || ''; json = (new Function("return " + result))(); link = me.options.imageUrlPrefix + json.url; if(json.state == 'SUCCESS' && json.url) { loader = me.document.getElementById(loadingId); loader.setAttribute('src', link); loader.setAttribute('_src', link); //loader.setAttribute('title', json.title || ''); loader.setAttribute('title', 'hjzgg-blog'); loader.setAttribute('alt', json.original || ''); loader.removeAttribute('id'); domUtils.removeClasses(loader, 'loadingclass'); } else { showErrorLoader && showErrorLoader(json.state); } }catch(er){ showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError')); } form.reset(); domUtils.un(iframe, 'load', callback); }
5.ueditor頁面刷新或者切換之后導致編輯的內容丟失問題解決
首先找到ueditor.all.js這個文件，ctrl+F尋找"plugins/autosave.js", 然后會發現一個save方法，本地的緩存都是通過這個函數保存的。
方式1：是通過window.localStorage，關於它的基本用法參考：http://blog.sina.com.cn/s/blog_621403ef0101bk3j.html
首先在sava方法里增加一句，window.localStorage.setItem("local_data", saveData);保存我們的數據，然后在頁面刷新的時候讀出來，將之前的數據重新賦給ueditor。
var ue = UE.getEditor('editor', {initialFrameHeight:500, maximumWords:10000, autoHeightEnabled:false}); $(function(){ var preData = UE.Editor.prototype.getPreferences(UE.saveKey); //判斷ueditor 編輯器是否創建成功 ue.addListener("ready", function () { // editor准備好之后才可以使用 ue.setContent(window.localStorage.getItem("local_data")); }); });
方式2：函數跟蹤會發現：function save ( editor ){}函數中調用了me.setPreferences( saveKey, saveData ); 如果想找到saveData 就必須通過saveKey來找到，在ueditor 中的index.html中，提供了這樣的一個函數：
function getLocalData () { alert(UE.getEditor('editor').execCommand( "getlocaldata" )); }
也就是通過執行一個 execCommand 方法來執行一個 “getlocaldata”命令就可得到本地緩存的數據。ctrl+f尋找“getlocaldata”， 然后會找到下面的代碼：
commands:{ 'clearlocaldata':{ execCommand:function (cmd, name) { if ( saveKey && me.getPreferences( saveKey ) ) { me.removePreferences( saveKey ) } }, notNeedUndo: true, ignoreContentChange:true }, 'getlocaldata':{ execCommand:function (cmd, name) { return saveKey ? me.getPreferences( saveKey ) || '' : ''; }, notNeedUndo: true, ignoreContentChange:true },
由於每次刷新頁面或者頁面切換時，saveKey變量會初始化，就不會得到我們之前保存的數據了。但是我們可根據給定計算savekey的方法來重新給savekey賦值。savekey的初始化就在不遠處，很容易看到，如下。
'ready':function(){ var _suffix = "-drafts-data", key = null; if ( me.key ) { key = me.key + _suffix; } else { key = ( me.container.parentNode.id || 'ue-common' ) + _suffix; } //頁面地址+編輯器ID 保持唯一 saveKey = ( location.protocol + location.host + location.pathname ).replace( /[.:\/]/g, '_' ) + key; },
接着重新設置saveKey的值，作如下操作：
'getlocaldata':{ execCommand:function (cmd, name) { var _suffix = "-drafts-data", key = null; if ( me.key ) { key = me.key + _suffix; } else { key = ( me.container.parentNode.id || 'ue-common' ) + _suffix; } //頁面地址+編輯器ID 保持唯一 var tmp_saveKey = ( location.protocol + location.host + location.pathname ).replace( /[.:\/]/g, '_' ) + key; return me.getPreferences( tmp_saveKey ) || ''; //return saveKey ? me.getPreferences( tmp_saveKey ) || '' : ''; }, notNeedUndo: true, ignoreContentChange:true },
然后在初始化ueditor時，調用UE.getEditor('editor').execCommand( "getlocaldata" )就可以看到緩存的數據
var ue = UE.getEditor('editor', {initialFrameHeight:500, maximumWords:10000, autoHeightEnabled:false}); alert(UE.getEditor('editor').execCommand( "getlocaldata" ))
最后一步將，緩存的數據重置到ueditor中
var ue = UE.getEditor('editor', {initialFrameHeight:500, maximumWords:10000, autoHeightEnabled:false}); $(function(){ var preData = UE.Editor.prototype.getPreferences(UE.saveKey); //判斷ueditor 編輯器是否創建成功 ue.addListener("ready", function () { // editor准備好之后才可以使用 ue.setContent(UE.getEditor('editor').execCommand( "getlocaldata" )); }); });
6.ueditor數據存儲和展示
1.ueditor初始化
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) { if (!RegExp.prototype.isPrototypeOf(reallyDo)) { return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith); } else { return this.replace(reallyDo, replaceWith); } } var ue = UE.getEditor('editor', {initialFrameHeight:500, maximumWords:10000, autoHeightEnabled:false});
2.得到ueditor中的內容(調用ueditor中的getContent方法)：UE.getEditor('editor').getContent().replaceAll('\n', '<br>', false);至於為什么要將字符串中的換行符替換成<br>,是因為后台接收的時候，字符串換行符沒有了。這樣在展示的時候代碼的位置會出現錯亂。
3.從數據庫中讀出存入的content，然后展示到新的頁面中，請參考：http://fex.baidu.com/ueditor/#start-uparse
4.從數據庫中讀出存入的content，然后重置到ueditor中（用於隨筆的更新）。注意，得到的content是個字符串，比如說是"...<p>."..."..</p>..."，但是賦值給js中的變量時，如：var content = "${sesson.content}"; 這樣就錯了，查看源碼的就會發現，字符串中有很多的引號"。
解決方法：var content = ${fn:replace(session.content, '\"', '\\\"')}, 將原始字符串中的引號 " 替換成 \" 。