首先我们需要来认识下UEditor,它是由百度web前端研发部开发所见即所得富文本web编辑器,并且是基于BSD协议的开源产品,允许自由使用和修改,这也是小编最看中它的地方,开源就意味着可以自己来定制这个编辑器。

接着我们来下载这个编辑器,百度一下UEditor,第一个就是它的官网。我们点击下载选项,我们发现一共有三个版本供我们选择,一个是UBuilder,一个是开发版,一个是Mini版,通过下面注释的红色小字我们可以了解到UBuilder,开发版和Mini版的区别。一般情况下我会选择开发版本即可。

UEditor(百度编辑器)的使用

1,从官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

2,在MyEclipse中创建WEB项目(UEditor),设置项目编码为UTF-8

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

3,在WebRoot目录下创建名为ueditor的文件夹,将解压后的文件及文件夹全部复制到ueditor下

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

4,将ueditor\jsp\lib下jar文件复制到WebRoot/WEB-INF/lib下

UEditor(百度编辑器)的使用

5,打开WebRoot/index.jsp页面

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

6,分别打开WebRoot/ueditor/jsp/config.json和WebRoot/ueditor/ueditor.config.js文件

UEditor(百度编辑器)的使用

7,在ueditor.config.js文件中添加window.UEDITOR_HOME_URL = "/UEditor/ueditor/";

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

8,修改config.json文件中imageUrlPrefix和imagePathFormat属性

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

9,将项目部署到服务器,这里用的是Tomcat8

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

10,运行服务器,在浏览器中打开http://localhost:8080/UEditor

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

11,点击多图上传按钮

UEditor(百度编辑器)的使用

12,点击选择图片按钮

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

13,选择图片

UEditor(百度编辑器)的使用

14,点击开始上传

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

15,上传成功后图片会有提示信息

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

16,点击确定按钮,在编译器中将显示上传图片

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

17,点击页面提交按钮,会显示编译器的内容

UEditor(百度编辑器)的使用UEditor(百度编辑器)的使用

github地址 https://github.com/ChenTao-Ji/UEditor.git

相关文章: