Редактор wangEditor5 [ZBLOG версия]

Бесплатное

finchui(卖家): hnyanshan@outlook.com 914466480 15639981097

Классификация: Плагины

Дата обновления: 2025-05-29 22:57:01

累计访问: 1138

Оценка: 还没有人打分

标签: wangEditor5 Z-blogPHP Бесплатные плагины

服务承诺: Бесплатное обновление免费体验Неограниченное доменное имя永久使用

wangEditor5 编辑器，免费开源（基于MIT开源协议），原作者双越老师，作者官网：https://www.wangeditor.com/，支持二次开发，大家可放心使用！

而且原作者也在一直更新wangEditor5 编辑器，因此我们也可随着原作者的更新升级我们的插件。

得益于wangEditor5 拥有完整的开发文档，我们才能把它制作成Z-blog PHP的插件。

曾几何时，我们一直想找一款类似于Общественный номер那样简单易用的现代化富文本编辑器，现在他来了！

Примечание: Вы не можете использовать это модуль вместе с другими модулями редактора, используйте этот модуль, пожалуйста, заранее закрыть другие модули редактора (например, UEditor, поставленный в Z-blog PHP)!

wangEditor5 编辑器默认不支持在手机上使用，其实不管任何编辑器插件，在手机上的用户体验都非常差，因此wangEditor5 编辑器官方干脆砍掉了这个功能。

当然这个功能也是可以解开的，只是需要定制在手机上显示的工具栏，才能提升用户的使用体验不，有需要的用户可以找我们定制！

以下是wangEditor官网对编辑器的介绍

#优势

#其他富文本编辑器的问题

网络搜索“Web 富文本编辑器”你会得到很多结果，例如国内的 UEditor kindEditor ，国外的 CKEditor TinyMCE Quill ProseMirror Draft Slate 等等。也有很多人使用这些编辑器，或者来做二次开发。

但他们都存在下面几个问题（敲黑板～），这可能会大大影响你的开发效率、开发成本和产品稳定性。

# Старая технология

如 UEditor KindEditor ，依然使用 document.execCommand API 。这将大大影响产品的稳定性、扩展性。

到时候啥啥都实现不了，哪儿哪儿都有问题，会被 PM 鄙视：“人家 xxx 咋能行？”

Китайский недружественный

如 CKEditor TinyMCE Quill ProseMirror 等，没有官方的中文文档。这将大大影响你的开发效率（今晚加班～）

PS：英语特别的，请略过。

#需要大量二次开发

如 ProseMirror Draft Slate ，他们虽然也是富文本编辑器，但他们仅仅是一个 core 或者 controller ，并不是一个完整的功能。

大量的二次开发，不仅仅会导致研发成本大增（本月封闭～），还可能因为测试不完善而出现无尽的 bug ，陷入泥潭。

PS：除非你们有强烈的定制开发需要。

#有框架的约束

如 Slate 和 Draft ，是依赖于 React 框架的。如果你想用到 Vue 中，工作量和难度是非常大的。

#无官方 React Vue 等组件

Некоторые, не зависящие от фреймворка, такие как ProseMirror, должны упаковать компоненты самостоятельно, если вы хотите использовать Vue React.

#新产品尚未稳定

上述列出来的编辑器，都是比较成熟的产品，用户量较大。你可能还会搜到其他产品，如新开发的、用户量不大的。
无论如何，请你慎重选择，因为富文本编辑器的坑真的太多了，需要经过大量的测试、使用才会慢慢稳定。

选择稳定的产品，可参考

github stars

npm 下载量

npm 发布时间和频率

搜索引擎的相关结果数量

是否有大厂背书

是否有单元测试 / e2e 测试

Преимущества # wangEditor

一个产品的价值，就在于解决用户的问题，提高效率、降低成本、增加稳定性和扩展性。

wangEditor 不是为了做而做，也不是单纯的模仿谁，而是经过上述问题分析之后，给出一个系统的解决方案。旨在真正去解决用户的问题，产出自己的价值。

#使用主流技术

wangEditor 从 V5 版本开始，有较大的技术更新。

#1. 升级为 L1 能力

弃用了 document.execCommand API ，使用 slate.jsopen in new window（但不依赖 React）为内核，升级为 L1 能力。

这也是目前主流富文本编辑器的技术方案，如知名的 Quill ProseMirror Draft 都在使用。

#2. 使用 vdom

使用 vdom 技术（基于 snabbdom.jsopen in new window ）做视图更新，model 和 view 分离，增加稳定性。

#3. 扩展性

使用扩展插件和模块的机制，保证扩展性。未来还会继续扩展更多功能。

其实，现在 wangEditor 内置的各个功能，也都是通过扩展插件和模块的形式搭建起来的。

#中文文档

wangEditor 有详细的中文文档，以及中文交流环境。因为作者open in new window就是国内程序员。

# Своевременная обратная связь и коммуникация

也可以去 github 提交 issue ，团队都会及时反馈或受理。

#集成所有功能，无需二次开发

wangEditor 内置了所有常见的富文本操作功能，能满足绝大部分使用需求。直接配置使用即可，无需再二次开发。

// wangEditor 已内置 50+ 菜单editor.getAllMenuKeys()[
"bold","underline","italic","through","code","clearStyle","headerSelect","header1","header2","header3",
"color","bgColor","insertLink","editLink","unLink","viewLink","insertImage","deleteImage","editImage",
"viewImageLink","imageWidth30","imageWidth50","imageWidth100","blockquote","emotion","fontSize","fontFamily",
"indent","delIndent","justifyLeft","justifyRight","justifyCenter","lineHeight","redo","undo","divider","codeBlock",
"bulletedList","numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
"deleteTableCol","tableHeader","tableFullWidth","insertVideo","deleteVideo","uploadImage","codeSelectLang"]

PS：同时，wangEditor 有丰富的 API 和足够的扩展性，允许你自定义开发菜单、模块、插件等。