ueditor的配置和使用

?　　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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/531362.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/531362.shtml
英文地址，請注明出處：http://en.pswp.cn/news/531362.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

windows上搭建NFS服務器

windows上搭建NFS服務器

在進行嵌入式開發的時候&#xff0c;我們常用的做法是搭建NFS服務器&#xff0c;然后使把文件系統、調試程序放在NFS服務器上&#xff0c;這樣可以方便調試&#xff0c;以前都是在linux里面開啟NFS服務器&#xff0c;今天來說下window里的nfs服務器–haneWin 一、軟件安裝和使…
閱讀更多...
計算機是如何啟動的？從未上電到操作系統啟動

計算機是如何啟動的？從未上電到操作系統啟動

計算機是如何啟動的&#xff0c;網絡上很多博文1都從 BIOS 程序的加載開始說起&#xff0c;有的也跳到 BIOS 程序加載 Bootloader 階段。個人認為把這個過程稱為操作系統是如何被加載并啟動應該更加貼切一點。同時&#xff0c;也有計算機硬件大神的文章[1][5]詳細分析計算機加電…
閱讀更多...
Hibernate注解

Hibernate注解

前言&#xff1a; 最近正在學習Hibernate通過注解&#xff08;annotation&#xff09;來管理映射關系&#xff0c;以前都是通過XML映射文件。下面拿個小例子說一下。 數據庫物理模型&#xff1a; 數據庫的描述&#xff1a; 一篇博客隨筆可以分到不同的類中&#xff0c;一個類中…
閱讀更多...
js表單動態添加數據并提交

js表單動態添加數據并提交

情景1&#xff1a;已經存在form對象了&#xff0c;動態為form增加對象并提交 function formAppendSubmit(){var myform$(#newArticleForm); //得到form對象var tmpInput$("<input typetext nameblogArticleForm.articleContent/>");tmpInput.attr("value&…
閱讀更多...
*++p和*p++的區別

*++p和*p++的區別

首先你應該明白* 和 的優先級是相同的&#xff0c;而且他們的結合性是從又往左的 #include <stdio.h>int main(int argc ,char * argv[]) {int str[]{1,2,3,4,5,6,7,8,9,10};int *p str;int a *p;//a*p ,pp1即a1&#xff0c;p&str[1]int b *p;//pp1,b*p即p&s…
閱讀更多...
zyUpload+struct2完成文件上傳

zyUpload+struct2完成文件上傳

前言&#xff1a; 最近在寫自己的博客網站&#xff0c;算是強化一下自己對s2sh框架的理解。期間遇到了很多問題&#xff0c;這些問題在寫之前都考慮過&#xff0c;感覺也就是那樣吧。但正真遇到了&#xff0c;也挺讓人難受的。就利用zyUpload這個js插件實現文件的上傳&#xff…
閱讀更多...
gbd的簡單使用（一）

gbd的簡單使用（一）

這篇文章將gdb的簡單使用&#xff0c;通過此篇文章你能學習到使用gdb進行調試程序 在Linux中編寫程序時&#xff0c;如何進行程序的debug工作呢&#xff1f;今天來介紹下gdb這個工具&#xff0c;可以在Linux下直接man gdb查看幫助信息 &#xff08;一&#xff09;gdb命令介紹 …
閱讀更多...
java發送內嵌圖片郵件

java發送內嵌圖片郵件

前言&#xff1a; 博客系統中需要郵件服務的功能&#xff0c;以前寫過類似的功能&#xff0c;不過功能太簡單了&#xff0c;僅僅是發送文本內容&#xff0c;現在嘗試一下發送內嵌圖片郵件&#xff01; 準備工作&#xff1a; 請參考&#xff1a;http://www.cnblogs.com/hujunzhe…
閱讀更多...
調試跟蹤利器---strace

調試跟蹤利器---strace

通過這篇文章你會學習到strace的用法&#xff0c;strace可以幫助你高效地定位進程中的一些錯誤&#xff0c;關于strace的用處有很多&#xff0c;可以自行發掘 前面我們講解了gdb調試程序,這篇文章介紹另一個調試跟蹤工具strace&#xff0c;同樣你可以在linux下執行man strace查…
閱讀更多...
MBR、DBR、FAT32基礎小知識

MBR、DBR、FAT32基礎小知識

MBR-------主引導記錄 1.創建時間&#xff1a;由分區軟件&#xff08;Fdisk/PartitionMagic/Windows 2000/Windows XP安裝 工具等&#xff09;給 硬盤分區時建立的。 2.功能 &#xff1a;存放硬盤分區信息和引導系統時檢查分區。 3.作用范圍&#xff1a;MBR和虛擬MBR控制著整個…
閱讀更多...
java使用Executor（執行器）管理線程

java使用Executor（執行器）管理線程

一.一個實現了Runnable接口的類 class MyThread implements Runnable{private static int num 0;Overridepublic void run() {while(true){synchronized(MyThread.class){num;try{Thread.sleep(500);} catch(Exception e){System.out.println(e.toString());}System.out.print…
閱讀更多...
JMM和happens-before原則

JMM和happens-before原則

JMM&#xff1a; Java Memory Model(Java內存模型)&#xff0c;圍繞著在并發過程中如何處理可見性、原子性、有序性這三個特性而建立的模型。 可見性&#xff1a; JMM提供了volatile變量定義、final、synchronized塊來保證可見性。　　例如&#xff1a;線程a在將共享變量x1寫入…
閱讀更多...
SD卡移植FAT32文件系統無MBR

SD卡移植FAT32文件系統無MBR

問題&#xff1a;在研究SD卡和FAT32文件系統的時候&#xff0c;發現SD卡有的有MBR&#xff0c;有的沒有MBR&#xff0c;這個為什么呢&#xff1f; 分析&#xff1a;MBR是主引導記錄&#xff0c;是在給磁盤分區的時候建立的&#xff0c;我們的SD卡沒有這個可能就是沒有進行過分區…
閱讀更多...
java獲取類的信息

java獲取類的信息

關鍵技術剖析 1.java.lang.reflect包實現了java的反射機制&#xff0c;在使用反射機制時&#xff0c;需要導入該包。 2.Class類的forName方法能夠根據類名加載類&#xff0c;獲得類的Class對象。 Class類的getSuperclass方法獲得父類的Class對象&#xff1b;getDeclaredFields方…
閱讀更多...
FAT32文件系統介紹

FAT32文件系統介紹

FAT32文件系統&#xff08;一&#xff09;為什么要有文件系統&#xff08;二&#xff09;FAT32文件系統組成&#xff08;三&#xff09;分步介紹各部分(1) 首先介紹一下MBR(2)DBR介紹(3)FAT表介紹(4) 數據區&#xff08;一&#xff09;為什么要有文件系統 文件系統是操作系統用…
閱讀更多...
java中動態代理實現機制

java中動態代理實現機制

前言&#xff1a; 代理模式是常用的java設計模式&#xff0c;它的特征是代理類與委托類有同樣的接口&#xff0c;代理類主要負責為委托類預處理消息、過濾消息、把消息轉發給委托類&#xff0c;以及事后處理消息等。代理類與委托類之間通常會存在關聯關系&#xff0c;一個代理類…
閱讀更多...
libiconv庫簡單裁剪支持CP437編碼

libiconv庫簡單裁剪支持CP437編碼

有許多人在做項目的時候都會遇到字符編碼的不一致導致的亂碼問題&#xff0c;那如何去解決呢&#xff1f;在Linux系統上可以通過iconv函數族來進行編碼轉換&#xff0c;但有時候我們并不需要全部的字符集&#xff0c;因為可能會占用比較大的空間&#xff0c;本文主要支持CP437編…
閱讀更多...
簡單java在線測評程序

簡單java在線測評程序

簡單java程序在線測評程序 一&#xff0e;前言 大家過年好&#xff01;今年的第一篇博客啊&#xff01;家里沒有網&#xff0c;到處蹭無線&#xff01;日子過得真糾結&#xff01;因為畢設的需求&#xff0c;簡單寫了一個java程序在線測評程序&#xff0c;當然也可以在本地測試…
閱讀更多...
指針強制類型轉換觸發內存自動對齊

指針強制類型轉換觸發內存自動對齊

C語言的指針是我們操作很靈活&#xff0c;但是也留下了不少坑&#xff0c;今天工作遇到了一個指針的坑&#xff0c;這里復現一下&#xff1a; 指針類型強制轉換,并進行解引用,引起的內存對齊問題.&#xff08;一&#xff09;問題復現&#xff1a; 運行環境&#xff1a;Ubuntu …
閱讀更多...
簡單文本編輯器

簡單文本編輯器

一、前言 聚天地之靈氣&#xff0c;集日月之精華&#xff01;一個簡單的java文本編輯器由此而生。畢設所需&#xff0c;很是無奈&#xff01; 二、界面預覽 三、實現思路 1.字體選擇器的實現 (1).字體類 class MyFont{private Font font;private Color color;public Font getFo…
閱讀更多...
最新文章

Copyright @ 2022~2023