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

最新推荐文章于 2025-05-24 13:37:07 发布

原创最新推荐文章于 2025-05-24 13:37:07 发布 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ueditor

UEditor 专栏收录该内容

1 篇文章

订阅专栏

原创不易转载标明出处！

感觉框架中自带的富文本编辑器，不太好用，而且功能不是特别全面！所以自己又集成了百度的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 获取！

qrcode_for_gh_83c7d77e6ed8_258

实现步骤：

源码修改可以参考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);