UEditor富文本编辑器整合经验分享文档格式.docx
- 文档编号:22034827
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:20
- 大小:1.70MB
UEditor富文本编辑器整合经验分享文档格式.docx
《UEditor富文本编辑器整合经验分享文档格式.docx》由会员分享,可在线阅读,更多相关《UEditor富文本编辑器整合经验分享文档格式.docx(20页珍藏版)》请在冰豆网上搜索。
XX官方UEditor文档及下载地址为
XXUEditor官网上,可以查看并下载UEditor源码,初始了解UEditor功能及体验。
由于ueditor开发组是一个前端团队,而对后端实力较欠缺(官方原话),笔者在整合过程中发现其对后台的处理还有些瑕疵(比如图片上传及回显处理或文件上传及下载处理),特别是没有具体前后台交互的实际案例(能让开发者在本地实际运行的DEMO)开发者实际调试成功,便能快速地掌握前后台交互的机制。
下图为XXFEX团队的对后端部署的说明
第2章官方DEMO
官方下载地址
本文以JSP版本为例下载UTF-8版本并解压
用浏览器打开index.html
看到demo界面,兴奋了一阵子,然而涉及到后台交互的功能(如图片文件上传),暂时是不能用的,按F12查看浏览器控制台发现有错误
由于官方demo没有后台代码的实际支撑,所以实际整合过程中会遇到各种问题,或许一时没有头绪,如果有一个实际能运行的案例就好了。
笔者参考csdn网站博主liuyazhang的一篇文章
拜读之后才开始自己的整合之路,并提供了实际运行的DEMO该例子也是在博主的例子的基础之上,修复了若干问题后才整合成功的。
解决了问题是,图片上传、存储、前端页面显示;
文件上传、存储、前端页面下载
第3章动手整合Ueditor
3.1ueditor整体植入结构
本例子整合工具使用的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’)
也可以使用<
加<
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.4serverUrl与服务器统一请求控制类UEditorController
本类替换原来官方提供的后台入口controller.jsp,参考代码如下
3.5图片及文件上传控制类UploadImageController
本类是实现图片上传至服务指定目录并在页面回显的指定服务类,同时也是文件上传及下载的服务类,与配置文件ueditor.config.js中定义的以下参数有关联
定义了图片上传后台类及方法比如/resource/upload/images
imagePath=
文件上传设置比如/resource/upload/images
代码参考如下
图片文件上传及存储方法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章案例分享
本文提供的完全与文章内容一致的案例,可供读者实际在本地运行
4.1案例下载地址
4.2运行准备工作
本案例由于是SpirngMVC整合需要连接Mysql数据库,数据库的连接配置文件为applicationContext.xml,配置举例如下
读者在本地配置好mysql数据库即可
实际运行效果如下
图片上传按钮和附件上传按钮如下图左侧和右侧
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- UEditor 文本 编辑器 整合 经验 分享