UEditor富文本编辑器整合经验分享(整合至SpringMVC)

一、引言          

前段时间开发邮件模块需要使用到一款富文本编辑器，综合考察之后选择了  UEditor——百度的富文本编辑器。在整合到项目的过程中，遇到了不少问题，困扰了不少时间，在整合过程中也参考了不少前辈们的文章收获良多，本文主要是谈谈自己在整合过程中遇到各种问题（或者网上甚少提到的）及UEditor自己的一些内部瑕疵，做为经验分享给大家，希望大家在以后的整合过程中避免可能会重复陷入的坑提供一些帮助和提醒。

 

          图  UEditor工具条

        图       UEditor功能展示

     UEditor是一款功能相对比较强大的前端富文本编辑器，支持四种后台语言环境，比如 php，asp，asp.net，jsp 。 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

百度官方UEditor文档及下载地址为

http://fex.baidu.com/ueditor/

      百度UEditor官网上，可以查看并下载UEditor源码，初始了解UEditor功能及体验。由于ueditor开发组是一个前端团队，而对后端实力较欠缺(官方原话)，笔者在整合过程中发现其对后台的处理还有些瑕疵（比如图片上传及回显处理或文件上传及下载处理），特别是没有具体前后台交互的实际案例（能让开发者在本地实际运行的DEMO）开发者实际调试成功，便能快速地掌握前后台交互的机制。下图为百度FEX团队的对后端部署的说明

二、官方DEMO

       官方下载地址 

http://ueditor.baidu.com/website/download.html

本文以 JSP版本为例 下载UTF-8版本并解压

用浏览器打开index.html

看到demo界面，兴奋了一阵子，然而涉及到后台交互的功能(如图片文件上传)，暂时是不能用的，按F12查看浏览器控制台发现有错误

由于官方demo没有后台代码的实际支撑，所以实际整合过程中会遇到各种问题，或许一时没有头绪，如果有一个实际能运行的案例就好了。

笔者参考csdn网站博主liuyazhang的一篇文章

http://blog.csdn.net/l1028386804/article/details/52389722

拜读之后才开始自己的整合之路，编写并提供了可实际运行的DEMO也是在博主的例子的基础之上，修复了若干问题后才整合成功的。解决了主要问题是，图片上传、存储、前端页面显示；文件上传、存储、前端页面下载.

三、 动手整合UEditor

3.1 ueditor整体植入结构

   本例子整合工具使用的eclipse,用流行的idea当然也是可以的，ueditor插件目录如下所示

工程中需要添加以下jar包(Ueditor中就有),如果工程使用Mevan则添加到Mevan中

3.2 富文本页面入口index.jsp

引入富文本编辑入口页面index.jsp如下所示

引用了ueditor.config.js,ueditor.all.js,zh-cn.js,index.js和jquery-1.12.0.min.js

控件容器载体可以用<textarea>  , <div>等

控件初始化方法 UE.getEditor(‘myEditor’)

也可以使用<div>加<script>来定义控件容器载体,初始化方法大同小异

无论是<textarea><div><script>等标签做为控件容器，最终都会被UEditor所渲染成控件。

3.2 关于config.json

 很多资料都提到了config.json文件是配置参数的文件，然而笔者发现参数定义在本文件中并不起作用，实际上配置参数定义在ueditor.config.js文件中才会真正起到作用

3.3 关于ueditor.config.js 

可以说是ueditor最重要的配置文件,后台配置基本定义在此。

 官方文件如上所示，定义了serverUrl 服务器统一请求接口路径jsp/controller.jsp

在ueditor目录中能找到这个controller.jsp，这个jsp仅仅是用来模拟后台的入口，真实整合过程中应该是调用后台Controller类而不是这个jsp

      整合完成之后的ueditor.config.js参考如下

contextRootPath :

由于整合过程中很多地方会用到工程根目录，这里就定义好即可，与工程名保持一致即可。

serverUrl:

服务器统一请求接口路径 比如 ../ueditor/config(参考UEditorController)

imageActionName:

定义了图片上传后台类及方法 比如  /resource/upload/images (参考UploadImageController)

imageUrl:

图片页面回显后台类及方法 比如 :  /resource/upload/viewImagesToPage.do?imagePath=(参考UploadImageController)

fileActionName:

文件上传设置 比如 /resource/upload/images(参考UploadImageController)

fileUrlPrefix:

文件下载后台 比如 /ueditor/resource/upload/fileDownLoad.do?(参考UploadImageController)

3.4  serverUrl与服务器统一请求控制类UEditorController

本类替换原来官方提供的后台入口controller.jsp ,参考代码如下

本类是实现图片上传至服务指定目录并在页面回显的指定服务类，同时也是文件上传及下载的服务类，与配置文件ueditor.config.js中定义的以下参数有关联

imageActionName:

定义了图片上传后台类及方法 比如  /resource/upload/images

imageUrl:

图片页面回显后台类及方法 比如 :  /resource/upload/viewImagesToPage.do?imagePath=

fileActionName:

文件上传设置 比如 /resource/upload/images

fileUrlPrefix:

文件下载后台 比如 /ueditor/resource/upload/fileDownLoad.do?

代码参考如下

图片文件上传及存储方法images

图片在JSP页面回显方法viewImagesToPage方法

文件在页面下载方法fileDownLoad

3.6 关于图片上传涉及 ueditor.all.js中的一些问题

• 图片上传至后台 MultipartFile为空

原码24486行涉及到图片上传的部分代码

name="' +me.options.imageFieldName + '" ' 需要与后台images方法中的 MultipartFilefile名称保持一致

如不然，则会取不到值MultipartFile对象为空

•  后端配置项没有正常加载，上传插件不能正常使用!

常出现于24557行me.getOpt('imageActionName') 获值出错 原因为ueditor.config.js中未定义imageActionName 图片后台服务路径

注意：上面代码对图片上传的路径做了调整并添加文件类型为image的参数(为存储路径的参数)

•   上传后图片无法回显

原码24524行  对图片路径处理的调整 其中json.url 是后台方法image赋值过去的

浏览器控制台打印效果 (图片显示链接)

• 上传excel文件后，页面反显为txt图片

上传的明明是excle文件 显示的居然是txt图标 原因是原码中少了 对 xlsx文件的映射关系，这里属于ueditor的小瑕疵

解决办法是在原码中加入对xlsx类型文件的映射关系即可

再重试 .xlsx类文件上传，发现图标恢复正常。

3.7 关于附件上传的问题

•   attachment.html

建议不引用webuploader.min.js改为引用原webuploader.js以方便处理附件上传遇到的各种问题

•  文件上传路径

webuploader.js第6199行

添加以上三行代码取得文件路径为

文件类型参数为 file

•   附件上传路径问题

attachment.js第146行

actionUrl = editor.getOpt('fileActionName'),考虑不用getActionUrl方法

•   附件下载链接问题

attachment.js第560行

• 文件上传路径

3.8 关于图片附件上传服务器存储路径的问题

对图片附件的存储路径定义在applications.properties文件中

后台的UploadImageController将对请求参数的不同将图片和附件存放在不同的目录中

四、 案例分享

 本文提供的完全与文章内容一致的案例，可供读者实际在本地运行

4.1 案例下载地址

http://download.csdn.net/download/lixinyao5281/10170693

4.2 运行准备工作

本案例由于是SpirngMVC整合需要连接Mysql数据库,数据库的连接配置文件为applicationContext.xml,配置举例如下

读者在本地配置好mysql数据库即可

图片上传按钮和附件上传按钮如下图左侧和右侧

实际运行效果如下