?　　ueditor下載好之后直接復(fù)制到項(xiàng)目的WebContent目錄下，并將ueditor\jsp\lib下的jar包復(fù)制或者剪切到項(xiàng)目的lib目錄下。先看一下效果，如下：

?

?

1.文件的上傳

　　 首先在ueditor/jsp目錄下找到config.json文件，就拿Image上傳來說吧。

　　?"imageUrlPrefix": "http://localhost:8080/HJZGG_BLOG", /* 圖片訪問路徑前綴 */。開始的時(shí)候imageUrlPrefix這個(gè)屬性值是空的。

?　 ??另外一個(gè)就是"imagePathFormat": "/fileUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */。這個(gè)我已經(jīng)改過了。

2.ueditor和struct2整合

如果項(xiàng)目中使用了Apache Struts2框架，將/* 過濾 ，由于該框架默認(rèn)使用Apache的Commons FileUpload組件，和內(nèi)建的FileUploadInterceptor攔截器實(shí)現(xiàn)文件上傳，將request中的文件域封裝到action中的一個(gè)File類型的屬性中，并刪除request中的原有文件域，這樣就會(huì)導(dǎo)致ueditor文件上傳不能成功。

解決辦法：重寫struct2的過濾器，對(duì)ueditor的請(qǐng)求不進(jìn)行過濾。

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方法，不要重寫其他的，否則可能會(huì)出錯(cuò)。

然后更改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的初始化細(xì)節(jié)

? ? ? 從ueditor/index.html中可以看到，實(shí)例化編輯器， 建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例，即如下：

? ? ? ??var ue = UE.getEditor('editor'), 我們可以找到函數(shù)的原型中還有一個(gè)參數(shù)，就是用來初始化ueditor的屬性的。函數(shù)原型位于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});

　　我們定義了初始高度、初始寬度、最大輸入字?jǐn)?shù)，不允許自動(dòng)增高（尤其是最后這個(gè)，當(dāng)你放入很大的圖片后，編輯框總是會(huì)變得很高）

　　如果我沒有設(shè)置autoHeightEnabled:false這個(gè)參數(shù)，編輯框總是會(huì)隨著圖片的拉伸變得很高。?

? 4.解決ueditor上傳圖片后屬性title的內(nèi)容

　　圖片上傳之后，鼠標(biāo)放在圖片上，出現(xiàn)title屬性的內(nèi)容，這個(gè)內(nèi)容是圖片的隨機(jī)名稱，看著可不爽。

　　解決辦法：首先看你引用的是ueditor.all.js還是ueditor.all.min.js, 到相應(yīng)的文件ctrl+F，尋找“l(fā)oader.setAttribute('title', json.title || '')”,然后自己可以設(shè)置title的值。具體函數(shù)如下。

?

　 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頁(yè)面刷新或者切換之后導(dǎo)致編輯的內(nèi)容丟失問題解決

　　首先找到ueditor.all.js這個(gè)文件，ctrl+F尋找"plugins/autosave.js", 然后會(huì)發(fā)現(xiàn)一個(gè)save方法，本地的緩存都是通過這個(gè)函數(shù)保存的。

方式1：是通過window.localStorage，關(guān)于它的基本用法參考：http://blog.sina.com.cn/s/blog_621403ef0101bk3j.html

?　　 ? ?首先在sava方法里增加一句，window.localStorage.setItem("local_data", saveData);保存我們的數(shù)據(jù)，然后在頁(yè)面刷新的時(shí)候讀出來，將之前的數(shù)據(jù)重新賦給ueditor。

var ue = UE.getEditor('editor', {initialFrameHeight:500, maximumWords:10000, autoHeightEnabled:false});$(function(){var preData = UE.Editor.prototype.getPreferences(UE.saveKey);//判斷ueditor 編輯器是否創(chuàng)建成功ue.addListener("ready", function () {// editor準(zhǔn)備好之后才可以使用ue.setContent(window.localStorage.getItem("local_data"));});});

方式2：函數(shù)跟蹤會(huì)發(fā)現(xiàn)：function save ( editor ){}函數(shù)中調(diào)用了me.setPreferences( saveKey, saveData ); 如果想找到saveData 就必須通過saveKey來找到，在ueditor 中的index.html中，提供了這樣的一個(gè)函數(shù)：

function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" )); }

　　也就是通過執(zhí)行一個(gè)?execCommand 方法來執(zhí)行一個(gè) “getlocaldata”命令就可得到本地緩存的數(shù)據(jù)。ctrl+f尋找“getlocaldata”， 然后會(huì)找到下面的代碼：

　　　　　　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},

　　由于每次刷新頁(yè)面或者頁(yè)面切換時(shí)，saveKey變量會(huì)初始化，就不會(huì)得到我們之前保存的數(shù)據(jù)了。但是我們可根據(jù)給定計(jì)算savekey的方法來重新給savekey賦值。savekey的初始化就在不遠(yuǎn)處，很容易看到，如下。

　　　　　　'ready':function(){var _suffix = "-drafts-data",key = null;if ( me.key ) {key = me.key + _suffix;} else {key = ( me.container.parentNode.id || 'ue-common' ) + _suffix;}//頁(yè)面地址+編輯器ID 保持唯一saveKey = ( location.protocol + location.host + location.pathname ).replace( /[.:\/]/g, '_' ) + key;},

　　接著重新設(shè)置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;}//頁(yè)面地址+編輯器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時(shí)，調(diào)用UE.getEditor('editor').execCommand( "getlocaldata" )就可以看到緩存的數(shù)據(jù)

var ue = UE.getEditor('editor', {initialFrameHeight:500, maximumWords:10000, autoHeightEnabled:false}); alert(UE.getEditor('editor').execCommand( "getlocaldata" ))

　　最后一步將，緩存的數(shù)據(jù)重置到ueditor中

　　var ue = UE.getEditor('editor', {initialFrameHeight:500, maximumWords:10000, autoHeightEnabled:false});$(function(){var preData = UE.Editor.prototype.getPreferences(UE.saveKey);//判斷ueditor 編輯器是否創(chuàng)建成功ue.addListener("ready", function () {// editor準(zhǔn)備好之后才可以使用ue.setContent(UE.getEditor('editor').execCommand( "getlocaldata" ));});});

?6.ueditor數(shù)據(jù)存儲(chǔ)和展示

　　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中的內(nèi)容(調(diào)用ueditor中的getContent方法)：UE.getEditor('editor').getContent().replaceAll('\n', '<br>', false);至于為什么要將字符串中的換行符替換成<br>,是因?yàn)楹笈_(tái)接收的時(shí)候，字符串換行符沒有了。這樣在展示的時(shí)候代碼的位置會(huì)出現(xiàn)錯(cuò)亂。

　　3.從數(shù)據(jù)庫(kù)中讀出存入的content，然后展示到新的頁(yè)面中，請(qǐng)參考：http://fex.baidu.com/ueditor/#start-uparse

?

　　4.從數(shù)據(jù)庫(kù)中讀出存入的content，然后重置到ueditor中（用于隨筆的更新）。注意，得到的content是個(gè)字符串，比如說是"...<p>."..."..</p>..."，但是賦值給js中的變量時(shí)，如：var content = "${sesson.content}"; 這樣就錯(cuò)了，查看源碼的就會(huì)發(fā)現(xiàn)，字符串中有很多的引號(hào)"。

　　解決方法：var content =?${fn:replace(session.content, '\"', '\\\"')}, 將原始字符串中的引號(hào) " ?替換成 ?\" 。

轉(zhuǎn)載于:https://www.cnblogs.com/hujunzheng/p/5063128.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。