wangEditor5 编辑器【ZBLOG版】

免费

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

分類: 插件

更新日期: 2025-05-29 22:57:01

累计访問: 1129

評分情况: 還没有人打分

標簽: wangEditor5 Z-blogPHP 免费插件

服务承诺: 免费升级免费體驗不限域名永久使用

获取應用留言咨询

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

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

得益于wangEditor5 擁有完整的開發文档，我們才能把它制作成Z-blog PHP的插件。

曾几何時，我們一直想找一款類似于微信公眾號那樣简單易用的現代化富文本编辑器，現在他來了！

注意：不可以與其他编辑器插件同時使用，使用该插件请提前關闭其他编辑器插件（例如Z-blog PHP自帶的UEditor编辑器）！

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 和足够的扩展性，允许你自定義開發菜單、模块、插件等。