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.mzph.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