原创不易转载标明出处！
感觉框架中自带的富文本编辑器，不太好用，而且功能不是特别全面！ 所以自己又集成了百度的UEditor的插件，功能强大，完善的API 。。。但插件本身还存在一些使用上的bug.
现在主要从下几个方面总结一下UEditor的使用心得：
一：ueditor的集成
1.JSP集导入JAR包版
直接去官网下载（https://ueditor.baidu.com/website/download.html）：
集成方法：
下载源码后直接放到项目根目录下面，需要注意的是下面几个关键的点：
1.jsp页面需要引入相应的js以及css 其次实例化UEditor
根据自己的路径情况自行引入即可！
实例化一个文本编辑器：
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var _editor = UE.getEditor("container",{ initialFrameWidth:800, initialFrameHeight:300, }); </script> |
jsp页面：
|
1 |
<textarea id="container" name="content"></textarea> |
具体参数可以查看官方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.
<!– 上传组件包 –>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.9</version> </dependency> |
到此医德页面已经可以使用UEditor的编辑器了，是不是很爽！别高兴太早哈。默认的这种方式有个弊端上传的文件回默认到Tomcat的根目录下，每次项目重新部署，你之前上传的附件都会消失！所以我们不能把它单独存在一个文件夹中，这样方便管理。当然这就需要自定义UEditor的上传路径了。
修改步骤其实也比较简单。暂且别急下面会讲到。
1.源码版
导入完整版UEditor,这种方式也是我个人比较推荐的吧，完整版的话就不需要再导入ueditor-1.1.2.jar这个包了，可以方便我们直接打断点进行调试，可以方便我们直接进行源码的修改。
需要注意的是完整版下载下来缺少几个必要的js文件。我们需要和jsp版的UEditor进行合并。
1.我们把完整版里面的jsp/src/com下的baidu文件夹拷贝导入到项目根目录下。
- jsp版的放在项目的其它位置。需要注意的是1.确保相应js的数量。2项目没有导入ueditor-1.1.2.jar这个包，不然会发生冲突。
至此 其它的和第一步一样！
2：自定义附件的上传路径
- 自定义上传路径的这种实现方式比较多！你可以自定义图片附件的上传action方法，也可以直接使用ueditor自带的上传功能只做修改就好！
我这主要修改源码的方式。
修改过的的自定义上传源码，以及支持自定上传路径的ueditor-1.1.2.jar包想要的可以关注公号回复ueditor 获取！
实现步骤：
1.源码修改可以参考https://blog.csdn.net/qq_28534469/article/details/80097761这篇文章。
2.进入controller.jsp，修改成我这样
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<%@ 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的<Host></Host>标签中同时增加：
|
1 |
<Context docBase="C:\image" path="/image" debug="0" reloadable="false"/> |
效果如下：
二：单独使用ueditor的图片，附件，音视频上传功能
还有一种情况就是我们上传图片附件的时候并不想要富文本框 只需要调用UEditor的图片、附件、或者视频的上传的功能。
1.我们只需要隐藏实例化的UEditor即可! 具体可以看代码的相应的注释
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
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页面：
|
1 2 3 4 5 6 7 8 9 |
<textarea id="container1" name="content1"></textarea> <input type="text" id="preview" /> <input type="text" id="file1" onclick="upFiles()" /> <input type="text" id="picture" onclick="upImage()"/> <input type="text" id="video1" onclick="upVideo()"/> |
最后一步 还需要修改相应的js:
1.附件上传的,在ueditor/dialogs/attachment/attachment.js里,定位editor.execCommand,做以下修改：
editor.fireEvent(‘afterUpfile’, list);//添加这句话
editor.execCommand(‘insertfile’, list);
2.图片上传的：uditor/dialogs/image/image.js,定位editor.execCommand,做以下修改：
editor.fireEvent(‘beforeinsertimage’,list);//增加这句,不然无法触发事件 remote && editor.fireEvent(“catchRemoteImage”);
3.视频上传的：uditor/dialogs/image/video.js,定位editor.execCommand,做以下修改：
editor.fireEvent(‘myinsertvideo’, videoObjs);
editor.execCommand(‘insertvideo’, videoObjs, ‘upload’);
Now现在就可以单独调用了！是不是很强大！
