ueditor与wangEditor，配合layer使用记录

最新推荐文章于 2025-06-20 10:45:08 发布
最新推荐文章于 2025-06-20 10:45:08 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 富文本编辑器 layui 文章标签： ueditor wangEditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41700532/article/details/89712641
本文记录了ueditor与wangEditor在项目中的应用对比，推荐使用轻量级且易上手的wangEditor。同时，文章详细介绍了ueditor在配合layer使用时遇到的问题，如需要在编辑器准备就绪后触发ready事件，以及在layer弹窗关闭时必须销毁ueditor以避免再次初始化失败。wangEditor则无需此类操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为项目需要富文本编辑器，所以ueditor跟wangEditor都用了；

wangEditor链接：http://www.wangeditor.com/

ueditor：https://ueditor.baidu.com/website/onlinedemo.html

比较之下，虽然ueditor功能更为强大，但是wangEditor轻量、简洁、易上手，最重要的是轻量、易上手，只需要引入它的js就可以了；要是真要说槽点，大概就是上传图片这块，不是那么的好；如果功能要求不多，推荐使用wangEditor；

ueditor百度家的编辑器，有UM跟UE两款编辑器，UE是采用的是div的加载方式，相对UM来说，我是感觉它比较轻量了；我用的是UM，所以本文记录的基本上是UM跟layer结合使用踩的一些坑。

1、获取内容跟设置内容之类的方法使用

看demo，会发现，这些方法都需要配合点击事件，然后看api，你就会发现，可以跟ready事件配合使用，ready事件是编辑器准备就绪后会触发的事件；如果你不配合ready或者点击事件用，那么，是会报错的；（如果你是用的wangEditor，不需要配合什么事件去使用的，直接用它文档中给出的方法就可以了）

注：editorUser是我定义的变量，储存的是实例化的编辑器

最低0.47元/天 解锁文章

200万优质内容无限畅学
富文本编辑器:UEditor与wangEditor 初使用总结
weixin_34306676的博客
04-10 4131
## 1、UEditor 1. UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。 2. 插件多，基本满足各种需求 ### 1.1、环境 > 环境搭建，结合了XAMPP(建站集成软件包)搭建后台，图片上传功能实现的必备-结合后台 ### 1.2、使用 >1、...
vue中引入wangEditor富文本编辑器
坤音女孩的博客
11-06 1万+
1.wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 下载wangEditor：npm install wangeditor（英文小写） 官网：www.wangEditor.com 文档：www.kancloud.cn/wangfupeng/wangeditor3/332599 源码：github.com/wangfupeng1988/wan...
Vue cli项目，使用富文本编辑器WangEditor，8小时摸爬滚打后，弃坑Tinymce、UEditor、Quill
决战决胜AI，放眼长期，稳中求进；知行合一，日拱一卒
09-15 2792
一共尝试了 Tinymce、UEditor、Quill等好几种编辑器，最终觉得最满意的是 WangEditor。 1、Tinymce 开源项目ElementAdmin自带的例子，图片上传 竟然存的是 base64。 没有看出，怎么指定后端url。 另外，这个开源项目的缺陷，很多组件都是作者自己封装第三方开源组件，这样经过二次包装的，自己再使用，感觉不灵活。 而且必须读懂 别人怎么封...
WANGEDITOR作为WEB编辑器，其HTML富文本编辑功能有多强大？
最新发布
weixin_45525177的博客
06-20 434
要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.net core,.net mvc,.net form群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国防军工，汽车制造，工程，政府，能源，水利水电，OA。
wangEditor富文本编辑器与layui图片上传
Light
05-08 885
记录：js 显示默认的wangEditor富文本编辑器内容和图片
wangEditor富文本编辑器
Kevinvcc200的博客
12-26 788
　富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器．  优快云的markdown编辑器便是一种富文本编辑器． 　　蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器．本来想使用百度的ueditor的，但是弄了好久依然还是有问题．所以就放弃了．ueditor配置确实比较复杂，官方的文档也没有很好的说清楚，错误提示不够明了，出错时未提示...
ueditor文本编辑器+layer弹窗
07-06
将UEditor与Layer结合使用，可以实现更加复杂的交互功能。例如，当用户在编辑器中需要进行一些复杂操作（如添加图片、选择颜色等）时，可以通过Layer弹窗展示相应的设置界面，提高用户体验。Layer的弹窗可以作为...
UEditor使用记录
04-10
UEditor是一款由百度开发的开源富文本编辑器，它在Web应用中被广泛使用，为用户提供了一种方便、高效的在线文本编辑体验。UEditor的主要特点是功能丰富、性能稳定、易于集成，尤其适合需要进行复杂文本编辑和格式化...
ueditor.zip基于layer的ueditor编辑器，可以上传视频，音频，数学公式，自己添加的复杂公式比如矩阵方程组
09-17
《基于layer的ueditor编辑器：视频音频上传与复杂公式编辑功能详解》 ueditor是一款广泛应用的富文本编辑器，其强大的功能和易用性深受开发者喜爱。在本项目中，ueditor与layer框架结合，形成了一款更加强大的编辑...
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor :open_book:项目介绍 vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4版本。 内置了代码高亮插件highlight.js ，使用的主题是Lioshi :light_bulb:注意 基于wangeditor默认配置，修改了我自己的替代配置 focus: false // 是否自动聚焦到编辑器，默认是 true ，我改成 false emotions: [ ] // 添加了大部分常见的 emoji 表情 languageTab: ' ' // 编辑器中按下 tab 键默认添加 4 个空格，我的习惯是 2 格 menuTooltipPosition: 'do
jQueryDay05：ueditor、wangEditor、WebUploader
坚持硬核
03-03 626
0x00 ueditor 下载地址:http://ueditor.baidu.com/website/ 官方文档:http://fex.baidu.com/ueditor/#start-toolbar 找到index.html 保留以下核心代码，其余删除 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
wangEditorhtml富文本编辑器开源版 v1.3.13.rar
07-10
wangEditorhtml编辑器由CSS和Js共同开发，与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。 　　它还会根据使用者的反馈不断完善，未来将支持移动版。
推荐几个非常不错的富文本编辑器
热门推荐
谯胜平的博客
08-29 11万+
1、wangEditor——基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、界面美观、易用、开源免费。 界面截图：官网地址 2、TinyMCE——TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能齐全，界面美观，就是文档是英文的，对开发人员英文水平有一定要求。 界面...
WANGEDITOR配置及功能实现详解
alisky119的博客
10-26 2013
编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,springboot,php,asp.net,jsp,.net core需求：复制粘贴word内容和图片要求：开源，免费，技术支持群体：学生,个人用户,外包,自由职业者,中小型网站,博客,最近感觉这块挻火的，网上有好多网友在搜这块信息，今天早上还有网友加我微信，实际上之前我就已经在网上公开了微信号，除了微信号还公开了QQ号码，但是还是有很多网友说找不到，这个就真没办法了。
layui中使用wangEditor富文本编辑器
梦奇
11-13 3372
<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script> <script type="text/javascript" src="http://www.wangeditor.com/js/jquery-1.10.2.min.js"></script> <div id="div1">
常见富文本编辑器大对比
永字诀的博客
05-08 4536
场景富文本编辑器对比，wangEditor、iceEditor、BuiEditor、simditor、TinyMCE、CKEditor5、summernote、Jodit、Froala、textbox、quill、kindeditor、UEditor、Editor.md
富文本编辑器比较
lijun208的博客
04-28 576
合并单元格、宽度拖拽（拖拽效果差）、背景色、框线颜色等（功能比较全）合并单元格、宽度拖拽（拖拽效果差）、背景色、框线颜色等（功能比较全）合并单元格、宽度拖拽、背景色、框线颜色等（功能比较全）合并单元格、宽度拖拽、背景色、框线颜色等（功能比较全）兼容主流浏览器，不兼容IE11一下，支持移动端编辑。兼容主流浏览器，不在支持IE浏览器，支持移动端编辑。兼容主流浏览器，不兼容IE8以下，不支持移动端。兼容主流浏览器，不兼容IE8以下，不支持移动端。大小、对齐、剪切、旋转、镜像等。支持，轻度格式化（功能单一）
wangeditor上传图片php,如何利用wangeditor编辑器结合tp5框架进行多图上传
weixin_36374843的博客
04-05 526
最近写项目，要用到多图上传！当然，之前用起来特别顺手的layui的富文本编辑器就不够用了因为layui富文本编辑器只能丹徒上传搜了下，wangeditor可以多图上传！于是就换了！也是因为个人实在不喜欢用baidueditor这种庞大的插件！如果后期实在是要用，那就在改改项目吧！本demo是再thinkphp5.0框架下 + wangeditor 使用的首先wangeditor的文档：https:...
layui插入图片接口php,基于ThinkPHP5，实现layui框架的富文本编辑器插入图片接口...
weixin_35785909的博客
03-11 373
本文主要是在基于ThinkPHP5+前端框架layui实现的EY内容管理系统中实现layui富文本编辑器layedit的插入图片接口。关于前端框架layui，不多介绍，可参考文章《你家隔壁程序猿推荐一款优秀的模块化UI框架-Layui》。使用layui富文本编辑器，需要放置一个HTML标签(一般为textarea文本域)作为layedit编辑器的目标元素，然后调用layedit.build('id...
ueditor使用教程与实践指南
标题：ueditor使用 描述：ueditor使用 标签：ueditor使用 压缩包子文件的文件名称列表：ueditor 知识点： 1. UEditor简介 UEditor是由百度前端技术部开发所贡献的基于Web的富文本编辑器，它能够提供流畅的编辑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值