堪比教科书的ueditor的使用详解

原创不易转载标明出处！

感觉框架中自带的富文本编辑器，不太好用，而且功能不是特别全面！ 所以自己又集成了百度的UEditor的插件，功能强大，完善的API 。。。但插件本身还存在一些使用上的bug.

现在主要从下几个方面总结一下UEditor的使用心得：

一：ueditor的集成

1. JSP集导入JAR包版

直接去官网下载（https://ueditor.baidu.com/website/download.html）：

集成方法：

下载源码后直接放到项目根目录下面，需要注意的是下面几个关键的点：

1. jsp页面需要引入相应的js以及css 其次实例化UEditor

根据自己的路径情况自行引入即可！

实例化一个文本编辑器：

jsp页面：

 

具体参数可以查看官方APIhttps://ueditor.baidu.com/doc/ 在此就不在累赘了！

1. 修改ueditor.config.js里面的URL路径

很多人网上看文档，也不知为什么改这，原理是什么？这的路径如果不对jsp页面就会报出：“后台路径配置错误的。。上传无法使用的。。”的错误提示。 说白了你只需要确保你的项目能访问到controller.jsp 这个文件就OK.

1. 修改config.json里的的访问前缀，这个路径主要是用来上传和图片回显得，本地的话可以直接写本地域名就好。

1. 最后一步导入jar包，在pom.xml文件中引入这几个包，需要注意的是ueditor-1.1.2.jar这个包需要单独手动导入因为maven仓库并没这个jar.

commons-fileupload

commons-fileupload

1.3.1





commons-io

commons-io

2.4





commons-codec

commons-codec

1.9

 

到此医德页面已经可以使用UEditor的编辑器了，是不是很爽！别高兴太早哈。默认的这种方式有个弊端上传的文件回默认到Tomcat的根目录下，每次项目重新部署，你之前上传的附件都会消失！所以我们不能把它单独存在一个文件夹中，这样方便管理。当然这就需要自定义UEditor的上传路径了。

修改步骤其实也比较简单。暂且别急下面会讲到。

1. 源码版

导入完整版UEditor,这种方式也是我个人比较推荐的吧，完整版的话就不需要再导入ueditor-1.1.2.jar这个包了，可以方便我们直接打断点进行调试，可以方便我们直接进行源码的修改。

需要注意的是完整版下载下来缺少几个必要的js文件。我们需要和jsp版的UEditor进行合并。

1.我们把完整版里面的jsp/src/com下的baidu文件夹拷贝导入到项目根目录下。

1. jsp版的放在项目的其它位置。需要注意的是1.确保相应js的数量。2项目没有导入ueditor-1.1.2.jar这个包，不然会发生冲突。

至此 其它的和第一步一样！

二：自定义附件的上传路径

1. 自定义上传路径的这种实现方式比较多！你可以自定义图片附件的上传action方法，也可以直接使用ueditor自带的上传功能只做修改就好！

我这主要修改源码的方式。

修改过的的自定义上传源码，以及支持自定上传路径的ueditor-1.1.2.jar包想要的可以关注公号回复ueditor 获取！

实现步骤：

1. 源码修改可以参考https://blog.csdn.net/qq_28534469/article/details/80097761这篇文章。
2. 进入controller.jsp，修改成我这样

<%@ page language="java" contentType="text/html; charset=UTF-8"

import="com.baidu.ueditor.ActionEnter"

pageEncoding="UTF-8"%>

<%@ page trimDirectiveWhitespaces="true" %>

<%

request.setCharacterEncoding( "utf-8" );

response.setHeader("Content-Type" , "text/html");

String rootPath = application.getRealPath( "/" );

String saveRootPath="C:/image/";//自定义路径

out.write( new ActionEnter(request,saveRootPath,rootPath ).exec() );

%>

 

如果不出意外，你已经上传成功了，但是图片回显不成功，如下图所示：

这个问题只需要配置一下tomcat的虚拟路径即可！

打开IDE自身的tomcat和你安装的tomcat的server.Xml的标签中同时增加：

 

效果如下：

二：单独使用ueditor的图片，附件，音视频上传功能

还有一种情况就是我们上传图片附件的时候并不想要富文本框 只需要调用UEditor的图片、附件、或者视频的上传的功能。

1. 我们只需要隐藏实例化的UEditor即可! 具体可以看代码的相应的注释

var _editor;

$(function() {

_editor = UE.getEditor('container1');



_editor.ready(function () {

_editor.hide();//隐藏富文本编辑器

//获取上传图片的地址

_editor.addListener('beforeInsertImage', function (t, arg) {

$("#picture").attr("value", arg[0].src);

//图片预览

$("#preview").attr("src", arg[0].src);

})

//获取上传附件的地址

_editor.addListener('afterUpfile', function (t, arg) {

var files=$("#file1").attr("value",arg[0].url);

})

//获取上传视频的地址

_editor.addListener('myinsertvideo', function (t, arg) {

var videos=$("#video1").attr("value",arg[0].url);

})

});

});

//图片弹窗的调用

function upImage() {

var myImage = _editor.getDialog("insertimage");

myImage.open();



}

//附件弹窗的调用

function upFiles() {

var myFiles2 = _editor.getDialog("attachment");

myFiles2.open();



}

//视频弹窗的调用

function upVideo() {

var myFiles3 = _editor.getDialog("insertvideo");

myFiles3.open();

}

 

Jsp页面：

 

最后一步 还需要修改相应的js:

1.附件上传的,在ueditor/dialogs/attachment/attachment.js里,定位editor.execCommand,做以下修改：

editor.fireEvent('afterUpfile', list);//添加这句话

editor.execCommand('insertfile', list);

1. 图片上传的：uditor/dialogs/image/image.js,定位editor.execCommand,做以下修改：

editor.fireEvent('beforeinsertimage',list);//增加这句,不然无法触发事件 remote && editor.fireEvent("catchRemoteImage");

1. 视频上传的：uditor/dialogs/image/video.js,定位editor.execCommand,做以下修改：

editor.fireEvent('myinsertvideo', videoObjs);

editor.execCommand('insertvideo', videoObjs, 'upload');

Now现在就可以单独调用了！是不是很强大！

 

 

 

还有问题的小伙伴也可加群：773436950咨询

原文链接：http://www.xiwenblog.com/archives/1745