使用百度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即可,最终可以展示图片
使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码的更多相关文章
- 富文本编辑器TInyMCE,本地图片上传(Image Upload)
TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...
- wangEditor富文本编辑器使用及图片上传
引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...
- Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
- 百度umeditor富文本编辑器插件扩展
富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...
- C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...
- c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...
- 百度富文本编辑器整合fastdfs文件服务器上传
技术:springboot+maven+ueditor 概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...
- ueditor 编辑器,自定义图片上传
<div> <h1>完整demo</h1> <form method="post" name="form"> & ...
- 富文本之BootStrap-wysiwyg 带图片上传功能
BootStrap-wysiwyg插件具有良好的编辑功能和展示效果. 一.使用方法在网上有很多,在此记录自己使用过程中的一些问题和解决方式. 相关依赖: bootstrap-wysiwyg.js (核 ...
随机推荐
- JavaScript学习笔记-正则表达式(语法篇)
正则表达式的模式规则是由一个字符系列组成的,包括所有字母和数字在内;大多数的字符(所有字母和数字)都是按字符的直接量来描述带匹配的字符;一些具有特殊语义的字符按照其特殊语义来进行匹配,有些字符需要通过 ...
- js删除数组中的'NaN'
js中的NaN不和任何值相等,包括自身. 所以可以使用x!=x来判断x是否是NaN,当且仅当x为NaN时,表达式的结果为true. NaN != NaN //true 可以依此删除数组中的'NaN'. ...
- Visual Studio 2013 的 Xamarin 安装教程
Xamarin 配置手册和离线包下载 http://pan.baidu.com/s/1eQ3qw8a 具体操作: 安装前提条件 1. 安装Visual Studio 2013,安装过程省略,我这里安 ...
- SharePoint 2013 JavaScript 对象判断用户权限
场 景 近期有个场景,判断当前用户对项目有没有编辑权限,使用JavaScript完成,弄了好久才弄出来,分享一下,有需要的自行扩展吧,具体如下: 代 码 function getPermissions ...
- [Java] Java record
2-1 java中的封装 概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法类实现对隐藏信息的操作和访问. 好处: 1. 只能通过规定的方法访问数据 2. 隐藏类的实例 ...
- DevExpress应用案例--语音识别器Dual Writer
Dual Writer是 一个以语音识别为特色的文档处理器,无需安装其他软件,只需要插入你的麦克风就可以开始录入口述文字.它不仅支持MS Word的DOCX格式,还支持 RTF.ODT.TXT等常见文 ...
- Android 友盟分享躺过的几个坑,大坑,坑爹啊
前言:公司上线了一个项目,做Android 客户端集成友盟分享,在做得过程中,遇到了下面3个问题,希望其他小伙伴注意. ) 错误1: 1.错误描述 我是照着友盟的集成文档一步一步的集成的,做完后,发现 ...
- 图解Android触摸事件分发
Android中触摸事件传递过程中最重要的是dispatchTouchEvent().onInterceptTouchEvent()和onTouchEvent()方法. View和Activity有d ...
- JAVA IO 序列化与设计模式
➠更多技术干货请戳:听云博客 序列化 什么是序列化 序列化:保存对象的状态 反序列化:读取保存对象的状态 序列化和序列化是Java提供的一种保存恢复对象状态的机制 序列化有什么用 将数据保存到文件或数 ...
- 让UILabel的文字顶部对齐
参考资料 http://stackoverflow.com/questions/1054558/how-do-i-vertically-align-text-within-a-uilabel 方法一 ...