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

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

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即可,最终可以展示图片

原文发布于微信公众号 - BeJavaGod(wxleechenxiang)

原文发表时间:2016-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

关于Eclipse 和 IDEA 导入library库文件 的步骤

4207
来自专栏林德熙的博客

WPF 程序生成类库错误

出现这个错误是因为 app.xaml 的生成是 ApplicationDefinition ,所以可以右击项目的 app.xaml 文件,在属性生成选择 pa...

1371
来自专栏守望轩

Visual Studio 2008 每日提示(十七)

#161、在解决方案里显示(或不显示)编辑器中打开的文件 原文链接:How to have the Solution Explorer always show...

3568
来自专栏十月梦想

HTML5新增表单类型

HTML5新增了input更多类型的框,如颜色,邮箱,多文件还有对正则表达式的支持!

1213
来自专栏吴裕超

撩人测试题项目总结

由于给热门测试这个div的margin-bottom失效,第二个测试活动没有显示完全,如左图所示期望效果是右图样式

922
来自专栏Java学习123

Windows平台kafka环境的搭建

1863
来自专栏cnblogs

vue组件如何被其他项目引用

自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点: 1. 如何发...

2745
来自专栏逸鹏说道

前端:图文混排-怎么在不使用float的情况下实现想要的效果呢?

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 举个例子 ? 重点:display:fle...

32411
来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

3706
来自专栏.Net移动开发

.Net移动开发平台 ,基于VisualStudio的可视化开发——Smobiler平台入门教程

通过以下步骤,可以简单了解到如何下载Smobiler Designer(设计器)、Client(客户端),以及如何通过设计器进行开发和调试移动应用,并在服务端部...

5423

扫码关注云+社区

领取腾讯云代金券