原创不易转载标明出处!
感觉框架中自带的富文本编辑器,不太好用,而且功能不是特别全面! 所以自己又集成了百度的UEditor的插件,功能强大,完善的API 。。。但插件本身还存在一些使用上的bug.
现在主要从下几个方面总结一下UEditor的使用心得:
一:ueditor的集成
- JSP集导入JAR包版
直接去官网下载(https://ueditor.baidu.com/website/download.html):
集成方法:
下载源码后直接放到项目根目录下面,需要注意的是下面几个关键的点:
- jsp页面需要引入相应的js以及css 其次实例化UEditor
根据自己的路径情况自行引入即可!
实例化一个文本编辑器:
<script>
var _editor = UE.getEditor("container",{
initialFrameWidth:800,
initialFrameHeight:300,
});
</script>
jsp页面:
<textarea id="container" name="content"></textarea>
具体参数可以查看官方APIhttps://ueditor.baidu.com/doc/ 在此就不在累赘了!
- 修改ueditor.config.js里面的URL路径
很多人网上看文档,也不知为什么改这,原理是什么?这的路径如果不对jsp页面就会报出:“后台路径配置错误的。。上传无法使用的。。”的错误提示。 说白了你只需要确保你的项目能访问到controller.jsp 这个文件就OK.
- 修改config.json里的的访问前缀,这个路径主要是用来上传和图片回显得,本地的话可以直接写本地域名就好。
- 最后一步导入jar包,在pom.xml文件中引入这几个包,需要注意的是ueditor-1.1.2.jar这个包需要单独手动导入因为maven仓库并没这个jar.
<!-- 上传组件包 -->
<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的上传路径了。
修改步骤其实也比较简单。暂且别急下面会讲到。
- 源码版
导入完整版UEditor,这种方式也是我个人比较推荐的吧,完整版的话就不需要再导入ueditor-1.1.2.jar这个包了,可以方便我们直接打断点进行调试,可以方便我们直接进行源码的修改。
需要注意的是完整版下载下来缺少几个必要的js文件。我们需要和jsp版的UEditor进行合并。
1.我们把完整版里面的jsp/src/com下的baidu文件夹拷贝导入到项目根目录下。
- jsp版的放在项目的其它位置。需要注意的是1.确保相应js的数量。2项目没有导入ueditor-1.1.2.jar这个包,不然会发生冲突。
至此 其它的和第一步一样!
二:自定义附件的上传路径
- 自定义上传路径的这种实现方式比较多!你可以自定义图片附件的上传action方法,也可以直接使用ueditor自带的上传功能只做修改就好!
我这主要修改源码的方式。
修改过的的自定义上传源码,以及支持自定上传路径的ueditor-1.1.2.jar包想要的可以关注公号回复ueditor 获取!
实现步骤:
- 源码修改可以参考https://blog.youkuaiyun.com/qq_28534469/article/details/80097761这篇文章。
- 进入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的<Host></Host>标签中同时增加:
<Context docBase="C:\image" path="/image" debug="0" reloadable="false"/>
效果如下:
二:单独使用ueditor的图片,附件,音视频上传功能
还有一种情况就是我们上传图片附件的时候并不想要富文本框 只需要调用UEditor的图片、附件、或者视频的上传的功能。
- 我们只需要隐藏实例化的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页面:
<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);
- 图片上传的:uditor/dialogs/image/image.js,定位editor.execCommand,做以下修改:
editor.fireEvent('beforeinsertimage',list);//增加这句,不然无法触发事件 remote && editor.fireEvent("catchRemoteImage");
- 视频上传的:uditor/dialogs/image/video.js,定位editor.execCommand,做以下修改:
editor.fireEvent('myinsertvideo', videoObjs);
editor.execCommand('insertvideo', videoObjs, 'upload');
Now现在就可以单独调用了!是不是很强大!
还有问题的小伙伴也可加群:773436950咨询