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

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富文本编辑器,修改自定义图片上传,修改源码的更多相关文章

  1. 富文本编辑器TInyMCE,本地图片上传(Image Upload)

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  2. wangEditor富文本编辑器使用及图片上传

    引入js文件 <script type="text/javascript" src="style/js/wangEditor.min.js">< ...

  3. Simditor 富文本编辑器多选图片上传、视频连接插入

    simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...

  4. 百度umeditor富文本编辑器插件扩展

    富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...

  5. C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)

    描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...

  6. c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)

    描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...

  7. 百度富文本编辑器整合fastdfs文件服务器上传

    技术:springboot+maven+ueditor   概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...

  8. ueditor 编辑器,自定义图片上传

    <div> <h1>完整demo</h1> <form method="post" name="form"> & ...

  9. 富文本之BootStrap-wysiwyg 带图片上传功能

    BootStrap-wysiwyg插件具有良好的编辑功能和展示效果. 一.使用方法在网上有很多,在此记录自己使用过程中的一些问题和解决方式. 相关依赖: bootstrap-wysiwyg.js (核 ...

随机推荐

  1. JavaScript中with语句的理解

    with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[0]){ ...

  2. css3选择器(上)

    1.给导航加分割线,左右 .nav li::before,.nav li::after{ content:""; position:absolute; top:14px; heig ...

  3. SAP 录屏BDC使用—实例

    1)  输入TCode:SHDB进入BDC录制初始界面,该界面可以实现已创建BDC Session信息的查看.删除及锁定等操作 2)  单击工具栏 Newrecording 按钮创建一个新的BDC,系 ...

  4. SAP中数字计算时溢出捕获

    CLEAR:g_vol. CATCH SYSTEM-EXCEPTIONS arithmetic_errors = OTHERS = . g_vol = gwa_input-laeng * gwa_in ...

  5. Sql Server 2008 数据库附加失败提示9004错误解决办法

    附加数据库 对于 服务器“WSS_Content”失败.  (Microsoft.SqlServer.Smo)执行 Transact-SQL 语句或批处理时发生了异常. (Microsoft.SqlS ...

  6. JAVA内部类使用

    一.什么是内部类? 一个类的定义放在另一个类的内部,这个类就叫做内部类 二.内部类有那些特性? 1.内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.class文件,但是前面冠以外部类的类名 ...

  7. UI控件(复习一下)

    如何修改控件状态• 可见,确实需要经常修改控件状态• 那如何去修改控件的状态呢?方法很简单➢ 每一个UI控件都是一个对象➢ 修改UI控件的状态,其实就是修改控件对象的属性➢ 比如修改UILabel显示 ...

  8. OC中的Block的那些事

    Block封装了一段代码,可以在任何时候执行 Block可以作为函数参数或者函数的返回值,而其本身又可以带输入参数或返回值. 苹果官方建议尽量多用block.在多线程.异步任务.集合遍历.集合排序.动 ...

  9. Android实用代码七段(五)

      前言  每次分享意味着每次都有进步,本系列以实用为主,欢迎和我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯 ...

  10. HttpClient 教程 (A)

    前言 超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需 ...