您的位置:首页 > 产品设计 > UI/UE

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

2017-09-02 16:06 441 查看
首先说下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的版本!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐