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

风间影月の技术小站 风间影月の技术小站     2022-08-13     740

关键词:

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

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

 

百度富文本编辑器ueditor自定义上传图片接口

如下图: 然后修改ueditor.all.js   查看详情

在angular项目下使用umeditor

  Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本。  公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合。但是目前官方只提供Jsp,Asp,Php和.net版本,也就是说只支持一般... 查看详情

umeditor踩坑

umeditor是百度富文本编辑器ueditor的mini版本,它属于轻量级,功能也还好,优点是加载快,貌似只有183k。但是这个维护做的确实不怎么样,或者压根没人维护,github提了许多issures基本没人解决。下面说说用的过程主要遇到的坑1.... 查看详情

原关于百度富文本编辑器的使用心得

...的数据库中添加新字段,修改后台代码用创建更多ueditor编辑器的新实例(一个字段对应一个实例)。编辑时从数据库中取出数据到ueditor编辑器中这里要说的就是我在从数据库中取出内容到编辑器中踩过的坑 1.实例名.getContent... 查看详情

umeditor上传图片相对路径的设置和保存(代码片段)

此篇文章仅献给已实现百度富文本编辑器,想要设置相对路径并保存到数据库,方便以后项目迁移。使用的版本为1.2.3,适用图片上传中点击以及拖拽功能。//保存图片相对地址的设置       //1.请修改Uplo... 查看详情

如何在 Devexpress 控件的富文本编辑器中添加自定义邮件合并字段

】如何在Devexpress控件的富文本编辑器中添加自定义邮件合并字段【英文标题】:HowAddCustomMailMergeFieldsinRichTextEditorinDevexpressControl【发布时间】:2015-12-0219:23:08【问题描述】:我想以编程方式在富文本编辑器中添加邮件合并字段。... 查看详情

vue使用froala-editor富文本编辑器

参考技术A在项目需要用到富文本编辑器时,自己也筛选过不少插件,最终选择了froala-editor,UI简单功能强大,官网也列出了很多国外大佬在使用,自己实战后确实感觉比其他的富文本编辑器好。官网:https://froala.com/main.js或者写... 查看详情

百度富文本编辑器ueditor

前言  配置.netmvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net的开发包,如下图,我下载的是1.2.6.1net版本的开发包。配置:1... 查看详情

百度富文本编辑器的使用(代码片段)

百度富文本编辑器的使用(2016年版本)对于大文章的网上编辑,你的输入编辑框肯定不够用,现在看看功能强大的富文本编辑框吧1.ueditor官方地址:http://ueditor.baidu.com/website/index.html  开发文档地址:  http://ueditor.b... 查看详情

springmvc怎么使用百度富文本编辑器

参考技术A上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题。一种方式是直接修改源码,步骤如下:1、编写controller如下(该接口是ueditor前后台交互的统一路径):packagecom.test.dcdp.controller;importjava.io.IOException;i... 查看详情

百度富文本ueditor编辑器的使用(代码片段)

...其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率UEditor官网下载地址:https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UT... 查看详情

使用百度富文本编辑器

插件下载地址:http://ueditor.baidu.com/website/download.html具体引用:把下载的文件完全的额引入到你的项目中,然后编辑页面内容:<!--加载编辑器的容器--><scriptid="container"style="height:700px"type="text/plain">    &nbs 查看详情

百度富文本自适应手机屏幕方法

百度编辑器中添加的图片在手机端不能自适应问题做网站经常要用到百度编辑器,页面的渲染我们一般用{$content}来显示,这时候在手机端就会出现首先宽度过宽超过手机尺寸的问题,用max-width:100%;限制之后呢又会发现高度还是... 查看详情

百度的富文本编辑器ueditor添加图片自动加上宽度和高度的属性

若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件在image.js中找到如下图所示:在此处添加上所要想显示的... 查看详情

百度富文本框ueditor(代码片段)

...入百度ueditor--%><linkhref="./plugin/ueditor/themes/default/css/umeditor.css"type="text/css"rel="stylesheet"><scripttype="text/javascript"src="./plugin/ueditor/umeditor.config.js"charset="utf-8"></script><scripttype="text/javascript"src="./plugin/ueditor/ 查看详情

jfinal整合百度富文本编辑器ueditor

ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的controller)后台添加该路由指定的controllerpackagecom.sandu.mega.admin.ueditor;importcom.jfinal.aop.Clear;importcom.jfinal.core.Controller;importcom.jfinal.kit.Ret 查看详情

百度富文本赋值

$(function(){  varcontent=$(‘#daily_content‘).val();  //判断ueditor编辑器是否创建成功  ue.addListener("ready",function(){    //editor准备好之后才可以使用    ue.setContent(content);  });}); 查看详情

百度的富文本编辑器ueditor兼容问题

...是在IE7下就遇到问题了,如下图所示:做项目很需要这样的编辑器,可又得考虑到兼容性,这怎么办?Ueditor1.4.3以上版本将不再承诺支持ie6/ie7,如果一定要支持IE6/7所以只好下载1.4.2版本试一下了。追问可我用的就是1.4.2的追答那就再找... 查看详情