?　　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, '\"', '\\\"')}, 將原始字符串中的引號 " ?替換成 ?\" 。

轉載于:https://www.cnblogs.com/hujunzheng/p/5063128.html

總結

以上是生活随笔為你收集整理的ueditor的配置和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。