ueditor的简单配置和使用

在项目中需要使用到富文本编辑器，我们选用的是ueditor，这是由百度web前端研发部开发所见即所得富文本web编辑器，功能比较强大，可以完成文本的编辑，图片的上传等功能。本文对ueditor的配置使用做一个简单的介绍。

一 准备开发工具和资源

资源的准备，到百度的网站下载ueditor项目文件，下载地址是http://ueditor.baidu.com/website/download.html。如下图所示。

如果是简单的配置使用，不需要进一步功能开发的话，我们只需要下载Jsp版本，这里使用UTF-8版，如果需要的功能比较多，可以在ueditor基础上进行二次开发，就需要下载ueditor的源码，包括java的实现代码。这里我们仅介绍ueditor的简单实用，也就是只是用Jsp版本的UTF-8版。

开发工具我使用的是eclipse Neon.1 Release (4.6.1)版本，jdk使用的是jdk1.8，tomcat使用的tomcat9。如果这些工具的版本和我的不一致，只要不是太旧的版本，应该是也是可以的，这个大家可以尝试一下。

二 配置和使用方法

首先在eclipse中创建一个动态项目，比如我的项目名称是test_ueditor，解压缩在上一步下载的ueditor项目文件，会得到一个utf8-jsp的文件夹，把这个文件夹改名为ueditor，这个文件夹下面有一些ueditor的项目文件夹和文件，如图所示。

然后将ueditor文件夹整个拷贝到test_ueditor项目的WebContent目录下，eclipse中的目录结构如下图所示。

项目中的报错，主要是config.json和controller.jsp两个文件，因为controller.jsp需要访问后端数据，也就是需要一些依赖的jar包，将jsp目录下的lib目录的jar包拷贝到WEB-INF的lib目录下，这样这些jar包就会被自动添加到项目中使用，这时我们就会发现controller.jsp文件不再报错了。config.json文件的报错，不影响项目的运行，可以不用管它。将test_ueditor项目添加到tomcat中，然后启动tomcat。这时，我们就可以在浏览器中访问到ueditor自带的index.html文件，访问路径为http://localhost:8080/test_ueditor/ueditor/，这个时候可以看到富文本编辑器。

但是，很多功能不能使用，特别是没有图片上传功能，这是因为我们还没有进行路径的设置。为了增加图片上传功能，我们需要修改ueditor根目录下的ueditor.config.js文件，添加window.UEDITOR_HOME_URL = "/test_ueditor/ueditor/";放到var URL = window.UEDITOR_HOME_URL || getUEBasePath();语句的前面。里面的test_ueditor是我们的项目名称，ueditor是WebContent下的ueditor文件名。

然后修改jsp目录下的config.json文件，主要修改图片的上传路径前缀。

"imageUrlPrefix": "/test_ueditor", /* 图片访问路径前缀 */

两个文件设置完毕之后，再启动tomcat，在浏览器中输入http://localhost:8080/test_ueditor/ueditor/，再点击单个图片上传，就会实现上传功能了。

我们在这里是直接使用的ueditor自带的index.html文件，如果想创建自己的前端html文件，实现富文本编辑器功能，可参考index.html文件，主要就是注意js文件的引入，和ueditor实例的创建。