在项目中需要使用到富文本编辑器,我们选用的是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实例的创建。