使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

简介: 富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用UEDITOR:百度开发的插件,lite版是UMEasyUI编辑器:用easyUI的都懂,基本上肯定用到其他的富文...

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种

CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用

UEDITOR:百度开发的插件,lite版是UM

EasyUI编辑器:用easyUI的都懂,基本上肯定用到

其他的富文本编辑器就不说了,前两个小编我用的比较多

本来我是比较倾向于CKEditor,但是这个插件不支持图片上传,图片功能只能链接过去,而不能在控件本身中上传,所以就选择了UMeditor

为啥选择UM,不选择UE,其实都差不多,UM精简了很多,而且比较小,UE功能太多而且很多东西都用不到

那么先来说说上传吧,引入JS什么的不说了,网上都有

要进行图片上传先要定义好静态目录,如下:

 

再来看看百度目录的结构

 

第一个框中是百度自己的上传,可以不用他,自己自定义上传,小编用的是springMVC + fastDFS图片服务器,只要修改地址就可以直接上传,相关文章可以参考我以前的博客

打开umeditor.config.js这个文件,这是UM的配置文件,可以自定义很多东西

 

覆盖原来的imageURL即可,修改为你自己项目中正在使用的图片上传接口即可,注意,必须是支持ajax异步上传的

那么好,现在启动项目测试,图片上传是没有问题,但是图片展示会有问题,原因是返回的JSON和百度的格式不匹配

那么怎么办,2种做法,适配自己的返回数据格式

或者直接修改百度的js源码

小编我采用了第二种做法,毕竟自己的数据格式自己最清楚

打开这个路径下的image.js

/danger-manager-web/src/main/webapp/WEB-INF/umeditor1_2_2-utf8-jsp/dialogs/image/image.js

找到如下方法

 

这个方法是成功后执行的,如图,callback是用来展示图片内容的,我直接修改callback,变更数据格式

 

修改image中的href即可,最终可以展示图片

 

相关文章
|
2月前
|
存储 前端开发 Java
基于云计算的Java电子病历编辑器源码 (B/S)
EMR: 病历数据、控件数据、病历模板数据、同步数据、病历个人模板数据、病历质控数据
37 1
|
2月前
|
存储 前端开发 JavaScript
医院电子病历编辑器源码 (java语言)
电子病历(EMR,Electronic Medical Record)是用电子技术保存、管理、传输和重现的数字化的病人的医疗记录,取代手写纸张病历,将医务人员在医疗活动过程中,使用医疗机构管理系统生成的文字、符号、图表、图形、数据、影像等数字化内容,并能实现存储、管理、传输和重现的医疗记录,是病历的一种记录形式。
65 1
|
3月前
|
Ubuntu Linux
百度搜索:蓝易云【Linux设置默认编辑器(qbit)】
现在,你已经成功将默认编辑器设置为qbit。在终端中输入 `editor`命令或打开文本文件时,系统将使用qbit作为默认编辑器来打开文件。请注意,`update-alternatives`命令还可以用于设置其他默认应用程序。
78 3
|
1月前
|
消息中间件 关系型数据库 MySQL
B/S基于云计算的云HIS智慧医院管理系统源码带电子病历编辑器
前端:Angular+Nginx 后台:Java+Spring,SpringBoot,SpringMVC,SpringSecurity,MyBatisPlus,等 数据库:MySQL + MyCat 缓存:Redis+J2Cache 消息队列:RabbitMQ 任务调度中心:XxlJob 报表组件:itext + POI + ureport2 数据库监控组件:Canal 接口技术:RESTful API + WebSocket + WebService
27 0
|
1月前
|
存储 前端开发 JavaScript
JAVA医院电子病历编辑器系统源码
电子病历编辑器极具灵活性,它既可嵌入到医院HIS系统中,作为内置编辑工具供多个模块使用,也可以独立拿出来,与第三方业务厂商展开合作,为他们提供病历书写功能,充分发挥编辑器的功能。
116 8
|
4月前
|
开发工具
百度搜索:蓝易云【使用vim编辑器,进行保存时报错:E382: Cannot write, ‘buftype‘ option is set详解。】
请注意,'buftype'选项的设置通常是由于某些插件或配置文件导致的。如果您在Vim的配置文件(如.vimrc)或使用的插件中设置了'buftype'选项,请检查相关配置并确保设置正确。
35 0
|
4月前
|
人工智能 API 开发工具
【Python+百度API】实现人脸识别和颜值检测系统(包括人脸数量、年龄、颜值评分、性别、种族、表情检测)(超详细 附源码)
【Python+百度API】实现人脸识别和颜值检测系统(包括人脸数量、年龄、颜值评分、性别、种族、表情检测)(超详细 附源码)
97 0
|
4月前
|
存储 搜索推荐 Java
java基于B/S模式的医院电子病历编辑器源码
电子病历内涵应包括: 1.信息共享。医院各个部门、科室在任何时间和地点都能调阅到病人所在医院的全部病历记录; 2.具有预警功能,对药物配伍禁忌、医疗方法不当进行提示; 3.支持医疗信息资料库,供医疗人员在工作时查询使用。
48 1
|
4月前
|
存储 搜索推荐 前端开发
SpringBoot框架+原生HTML云端SaaS服务方式的电子病历编辑器源码
一体化电子病历系统基于云端SaaS服务的方式,采用B/S(Browser/Server)架构提供,覆盖了医疗机构电子病历模板制作到管理使用的整个流程。除实现在线制作内容丰富、图文并茂、功能完善的电子病历模板外,还可按照医疗机构的特色,根据不同业务的需求,使用该系统定制个性化、实用化、特色化电子病历模板。 该系统能对电子病历模板进行统一集中管理,通用的电子病历模板能直接提供给不同的医疗机构直接使用,避免重复制作;提供了功能齐备的控件元素,实现电子病历在业务使用中数据的自动获取功能,简化了人工的大量填报。
|
4月前
|
Linux 开发工具
百度搜索:蓝易云【Linux如何使用Nano编辑器教程。】
需要注意的是,Nano是一款轻量级的文本编辑器,适用于简单的编辑任务。如果你需要进行更复杂的编辑或编程任务,可能需要使用更强大的编辑器,如Vim或Emacs。
30 0

相关实验场景

更多