Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >抛弃百度UMEditor，拥抱summernote

抛弃百度UMEditor，拥抱summernote

风间影月

发布于 2018-04-04 09:13:30

发布于 2018-04-04 09:13:30

1.8K1

举报

文章被收录于专栏：BeJavaGodBeJavaGod

由于一些项目上的原因以及相关因素，我们使用其他富文本编辑器替代了UMEditor

本来用CKEditor，但是团队觉得使用起来很不顺手，尤其图片上传十分不爽，功能复杂但是使用起来比较麻烦

后来我们又替换了summernote，这款编辑器名气没有ck大，但是简洁直观，而且风格和项目很匹配，最终决定使用这款

这是github地址，先下载

https://github.com/summernote/summernote

然后在文件中引入css以及js，注意要使用国际化文件则引入语言包，不然默认显示英文

在html中加入编辑器

最后初始化

需要注意的是，默认上传是需要修改的，不然会以二进制的文件形式，性能受影响

后台代码就不放出了，之前讲过多次了，参照一下即可

最终需要注意的是，这个上传文件有个bug，就是选择文件的时候弹出框很慢，十分不爽，找到如下两个文件修改其中代码即可

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2017-03-29，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 BeJavaGod 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

1 条评论

热度

最新

用户6351203回复风间影月

2019-12-10

能否将后台代码贴出来看看啊，大佬

能否将后台代码贴出来看看啊，大佬

回复回复点赞举报

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

2024年Vue富文本编辑器推荐：十款必备富文本组件详解之Vue中有哪些富文本组件？

配置 editor 编辑器博客富文本编辑器

在现代前端开发中，富文本编辑器几乎是不可或缺的工具，无论是构建博客、CMS系统，还是处理在线文档，Vue生态为开发者提供了丰富的选择。本文汇总了十款高效、流行的富文本编辑器组件，详细解析它们的安装、配置、用法及适用场景，帮助你快速上手并选择最佳解决方案。

猫头虎

2024/12/30

6000

14款web前端常用的富文本编辑器插件

开源 html 网站 https http

作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。

winty

2020/11/13

18.2K0

django使用ckeditor上传图片

django html python

1、在模型类中设置字段为富文本类型，这里需要注意引入的是RichTextUploadingField,以允许上传图片，需要和RichTextField区分开

py3study

2020/01/22

2.5K0

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

富文本编辑器，不多说了，这个大家应该都用到过，至于用到的什么版本，那就分很多种 CKEditor：很早以前叫FCK，那个时候也用过，现在改名了，比较流行的一个插件，国外很多公司在用 UEDITOR：百度开发的插件，lite版是UM EasyUI编辑器：用easyUI的都懂，基本上肯定用到其他的富文本编辑器就不说了，前两个小编我用的比较多本来我是比较倾向于CKEditor，但是这个插件不支持图片上传，图片功能只能链接过去，而不能在控件本身中上传，所以就选择了UMeditor 为啥选择UM，不选择UE，其实

风间影月

2018/04/04

2.1K0

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

Django 的 admin后台使用富文本编辑器，保存数据之后，还要在html页面展示

CHEDITOR_UPLOAD_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。需要注意的是，如果使用django自带的存储，那么路径是一个相对路径，它相对与你设置的的MEDIA_ROOT。

一写代码就开心

2022/05/09

1.3K0

Django 的 admin后台使用富文本编辑器，保存数据之后，还要在html页面展示

Mac+IDEA+百度富文本UEditor

ide tomcat windows javascript jsp

近期，手下有一个项目。需要嵌入一个富文本编辑器，基于大厂的光环，选择了百度富文本 UEditor，之前都是 Windows+Eclipse ，转到 Mac+IDEA 后，发现差别还是有的，不管大小，即使有一点不对，都不符合预期效果。鼓捣了一下午，记录分享一下。

子乾建建-Jeff

2020/06/29

7870

Mac+IDEA+百度富文本UEditor

Django添加ckeditor富文本编辑器

javascript django 编程算法 css python

源码 https://github.com/django-ckeditor/django-ckeditor

菲宇

2022/12/21

2.2K0

不重新编译DLL，让FCKEditor支持附件上传

开源 flash php

最近在忙着做一个小项目，就是一个企业内部的论坛，其中最基本的一点就是富文本编辑帖子和回帖。目前市面上用的比较多的富文本编辑器有：

深蓝studyzy

2022/06/16

7420

不重新编译DLL，让FCKEditor支持附件上传

summernote富文本编辑器基本使用

https 网络安全 api 数据库 sql

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。

别团等shy哥发育

2023/02/25

2.7K0

summernote富文本编辑器基本使用

Vue富文本_ueditor编辑器

https 网络安全 bootstrap html 网站

很多项目中都需要用到富文本编辑器，目前也有很多种类的富文本编辑器。我就查了一下资料，了解了一些目前常用的富文本编辑器

全栈程序员站长

2022/11/04

3K0

Vue富文本_ueditor编辑器

关于富文本编辑器

react https github

在使用了众多富文本编辑器后,终于有一些总结经验了. 这两天换了不下5个富文本编辑器,最后还是选择了第一次用的.后面的都白试了. 先说一下这个项目的需要,1.基本的字体以及样式修改要的,要图片上传功能,需要上传到自己公司的服务器,在获取地址后加上编辑中去,2.需要placeholder属性. 也许很多人都觉得这两个属性的富文本编辑器很多,然而在我花了1天左右时间寻找后,只有1款勉强满足自己的需要,placeholder这个属性还是自己通过修改原插件才得以实现的. 下面是我使用过的富文本编辑器: 1.react

杭州前端工程师

2018/06/15

3K0

vue集成百度UEditor富文本编辑器

jsp java utf8 c++vue.js

1、使用vue-cli构建一个vue项目。然后下载UEditor源码。地址：http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件，打开UEditor目录文件。这里下载的是jsp版本的。文件名字没有更改过。打开里面的ueditor.config.js文件找到serverUrl把这行代码注释了。这个代码是用来上传图片的后台地址。如果不注释了会请求报错。编辑器跑起来再做服务配置修改地址。 2、在.vue文件中引入主要js文件 import ‘../../static/utf8-jsp/ueditor.config’ import ‘../../static/utf8-jsp/ueditor.all’; import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn’; 3、在data中申明一个变量存储UEditor的实例方便在vue的其他地方使用，然后申明一个变量存储手动获取的编辑器里面的内容，再什么一个变量存储初始化时要写入编辑器的内容。三个变量。如果操作得当。可以减少变量的时候。这是笨办法 4、在vue的mounted钩子函数中调用编辑器的方法生成实例存储到刚刚申明的变量中，在实例中传入参数。第一个是id，id是生成编辑器的div的id。第二个参数是一个对象。对象内容是对编辑器的配置。如资源访问路径，toolbars内容配置。 5、在html部分写一个div标签 <div id="editor" type="text/plain" style="width:1024px;height:500px;"></div> 6、然后配置资源路径。在实例化的时候传入的参数里。第二个参数是一个对象。内容包括路径。 this.ue = UE.getEditor('editor',{ BaseUrl: '', UEDITOR_HOME_URL: 'static/utf8-jsp/', }); 这个UEDITOR_HOME_URL就是配置编辑器自己访问自己所需要的依赖的路径。设置到存放的文件下utf8-jsp是编辑器文件的更目录。目录不一样可自行更改 7、然后保存。就可以在界面上显示一个完整的富文本编辑器 8、如果要获取内容则使用在data里面申明的编辑器实例在vue中this.实例调用方法getContent()可以获取到内容 9如果要设置内容则调用：setContent('欢迎使用ueditor'); 更多方法参考官方文档。 10、文档内容属于个人踩坑的心得。如有错误。请留言指出。谢谢 11、需要注意的是资源路径容易搞错。使用相对路径即可 12、贴出代码

全栈程序员站长

2022/07/07

1.5K0

vue集成百度UEditor富文本编辑器

富文本编辑器之游戏角色升级ing

腾讯云开发者社区 java

什么是富文本编辑器——富文本编辑器集成了格式设置、媒体嵌入、社交互动等一系列编辑功能，所见即所得的给用户提供多元的展示效果。譬如论坛、社区、评论等等都用到了富文本编辑器。

2020labs小助手

2021/07/05

1.4K0

WYSIWYG富文本编辑器选择——综合考虑功能与版权协议

wysiwyg 富文本编辑器 tinymce

如果奔着盗版好使的情况，TinyMCE yyds，如果只要基础的文本编辑功能，quill 小而精，如果是react项目，推荐lexical，个人最终选择wangeditor

周陆军博客

2023/05/19

2.4K0

百度富文本编辑器的上传图片的路径问题

之前在写个人博客网站的时候，用到了百度的富文本编辑器，在往文章内容插入图片的时候，上传一直出错，总结了一下，与大家分享

lin_zone

2018/08/15

9610

百度编辑器的那些坑

编程算法 html tcp/ip

最近在处理公司的旧后台浏览器兼容问题，要求更换ewebeditor 编辑器，更换为ueditor 编辑器，并且要求 IE9/IE8/IE10/IE11/Micro Edge/Google/360 编辑器各项兼容，听说百度的编辑器兼容至IE6，以为简单的换个编辑器的我，在上面折腾了不少时间，本文针对具体问题进行处理，可能读者遇不到我这样的问题，事前说明：仅供参考、仅供参考、仅供参考

阿东

2021/08/16

1.5K0

【实战笔记】怎么给自己的博客搭建富文本?

vue.js https github javascript 网络安全

---- 博客地址我个人博客的地址👉👉点击进入开源项目地址这是我一个开源的收藏网址的项目项目地址👉👉点击进入，可以直接设置为浏览器主页或者桌面快捷方式进行使用，本人在用，长期维护。完全

一尾流莺

2022/12/10

7090

【实战笔记】怎么给自己的博客搭建富文本?

「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例

编程算法 html sql 开源 github

大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容，相信很快就能够开源出来让大家尝鲜了，先让大家看看当前的开发进度：

程序员十三

2020/11/03

9290

「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例

Vue实战Vue-Quill-Editor富文本编辑器

vue.js element ui

做博客系统、商城系统、cms系统等系统的时候需要自动生成网页，自动生成多媒体等图片网页的时候我们就用到了富文本编辑器。以前用jquery的时候经常使用的有百度富文本编辑器UEditor，不过因为后期自适应不大好使，也就换成别的了，有时候用过Ckeditor。自从用了element ui后打算做一个博客系统，后来就研究了一下Vue-Quill-Editor，嵌入到element ui中。Vue-Quill-Editor，这是一款基于Quill、适用于Vue的富文本编辑器。

十分钟空间

2022/08/17

1.5K0

angular 2+组件 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

CKEditor 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。

ianzhi

2019/07/31

3.6K0

相关推荐

2024年Vue富文本编辑器推荐：十款必备富文本组件详解之Vue中有哪些富文本组件？

更多 >

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验