ueditor 教程 完美解决与easyui遮盖 commons-io冲突 完整java配置

首先说下ueditor是什么? ueditor是百度开发的 富文本编辑器,可以直接使用到项目中已经内置了多图片上传,视频,文件上传等后台功能和后台包,

这里主要说 javaweb工程整合配置

先去ueditor官网下载安装包 1.4.3.3jsp版 最新更新是2016年2月 看来是很久没人维护了

解压到项目wbapp下任意路径, 网上说最好根目录 其实只要引入目录正确放在那里都可以

首先在jsp页面引入 ueditor 相关文件

<!-- 配置文件 -->

<script type="text/javascript" src="<%=path%>sys/js/ueditor1433/ueditor.config.js"></script>

<!-- 编辑器源码文件 -->

<script type="text/javascript" src="<%=path%>sys/js/ueditor1433/ueditor.all.js"></script>

然后在页面中引入 ueditor (这里就要讲到与easyui的遮盖问题)

$(function(){

var ue = UE.getEditor("articleContent");

});

<div id="articleContent"></div>

我这里是用 easyui的easyui-dialog弹窗引用的会出现 点字体或文字大小 遮盖的问题,怎么办网上有很多教程,但是试了半天都不管用,所以 看完ueditor源码发现,最后解决的方案是这样的

在easyui 的easyui-dialog控件里加

//配置 easyui与ueditor兼容问题(ueditor基础配置不建议更改)

$("#dlg").dialog({

modal:false,

minimizable:false,

maximizable:false,

resizable:false,

closed:true,

onOpen:function(){

$(".window").css("z-index","499");

$(".window-shadow").css("z-index","498");

},

onMove:function(left,top){

$(".window").css("z-index","499");

$(".window-shadow").css("z-index","498");

},

onResize:function(width,height){

$(".window").css("z-index","499");

$(".window-shadow").css("z-index","498");

},

});

项目启动 页面 如果ueditor显示证明前端基础配置已经成功了,下面介绍一下设置和获取ueditor内容

我这里是用 easyui封装的对象所以获取的是String字符串,如果想获取ueditor自定义内容看下api

//获取 ueditor实例

var ue = UE.getEditor("articleContent");

//给ueditor内容体赋值

ue.setContent(""); //赋值给UEditor

ue.getContentTxt();//获取ueditor内容体(html代码)

然后说下后端配置

找到/ueditor/jsp/lib目录 有4个基础复制到lib目录下 这里要讲下 ueditor封装用的是 commons-io 2.4的包如果与你本身的项目相冲突建议更改本地项目的 io 版本或者 修改ueditor1.1.2.jar中的StorageManager.class类中的117行 File tmpDir = FileUtils.getTempDirectory();方法,FileUtils.moveFile(tmpFile, targetFile);方法,这两个方法是io.24才有的的方法

修改ueditor上传图片配置

找到 ueditor下的jsp文件夹下的 config.json文件打开

一般只修改 项目名和文件保存路径即可 其他设置按照需要修改 其他图片文件等上传设置相同

    "imageUrlPrefix": "/e8p-db/", /* 项目名称 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传路径 */

这里还要说下 ueditor自动保存的问题,特别是在新建的时候出现上次保存的内容特别头疼, 网上找了很多方法都不能解决,据说是 1.4.3.3版本不能去掉,但是这里我的方法是 新建的时候在js里把 ueditor的内容复制为空解决这个问题

//获取 ueditor实例

var ue = UE.getEditor("articleContent");

ue.setContent(""); //赋值给UEditor

时间的原因 稍后提供 ueditor 支持commons-io1.3.2的版本!