wangEditor5 Editor [ZBlog Version]

wangEditor5 editor, free open source (based on MIT open source protocol), original author Shuangyue Teacher, author's official website:https://www.wangeditor.com/, supports secondary development, everyone can use it with confidence!

Moreover, the original author has been updating the wangEditor5 editor, so we can also upgrade our plug-ins as the original author updates.

Thanks to the complete development documentation of wangEditor5, we can make it a plug-in for Z-blog PHP.

There was a time when we always wanted to find a carWeixin Official AccountsSuch a modern and easy-to-use rich text editor, and now he is here!

Note: You cannot use it at the same time as other editor plug-ins. To use this plug-in, please close other editor plug-ins in advance (such as the UEditor editor that comes with Z-blog PHP)!

The wangEditor5 editor does not support use on mobile phones by default. In fact, no matter any editor plug-in, the user experience on mobile phones is very poor, so the wangEditor5 editor official simply cut off this feature.

Of course, this function can also be unlocked. We just need to customize the toolbar displayed on the mobile phone to improve the user's experience. Users who need it can come to us to customize it!

The following is an introduction to the editor on wangEditor's official website

#Advantage

#Problems with other rich text editors

Search for "Web Rich Text Editor" online and you will get many results, such as the domestic UEditor kindEditor, the foreign CKEditor TinyMCE Quill ProseMirror Draft Slate, etc. There are also many people using these editors or doing secondary development.

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

#Technology is old

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

By then, nothing can be achieved, there will be problems everywhere, and PM will despise him: "How can people xxx do?"

#Chinese is not friendly

For example, CKEditor TinyMCE Quill ProseMirror, etc., there is no official Chinese document. This will greatly affect your development efficiency (work overtime tonight ~)

PS: English is special, please skip it.

#Requires a lot of secondary development

For example, ProseMirror Draft Slate, although they are also rich text editors, they are just a core or controller, not a complete feature.

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

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

#Constraints with frameworks

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

#No official React Vue and other components

For some non-framework dependent products, such as ProseMirror, if you want to use Vue React, you need to package the components yourself.

#New products are not yet stable

The editors listed above are all relatively mature products with a large number of users. You may also find other products, such as newly developed products with small users.
In any case, please choose carefully, because rich text editors really have too many pitfalls and require a lot of testing and use before they can gradually stabilize.

选择稳定的产品，可参考

github stars

npm 下载量

Npm release time and frequency

搜索引擎的相关结果数量

是否有大厂背书

是否有单元测试 / e2e 测试

Advantages of #wangEditor

The value of a product lies in solving user problems, improving efficiency, reducing costs, and increasing stability and scalability.

WangEditor does not do it just for the sake of doing it, nor is it simply imitating someone. Instead, it provides a systematic solution after analyzing the above problems. The purpose is to truly solve users 'problems and produce their own value.

#使用主流技术

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

#1. Upgrade to L1 capabilities

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

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

#2. Using vdom

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

#3. scalability

The mechanism of using extensions and modules ensures extensibility. More functions will continue to be expanded in the future.

In fact, the various built-in functions of wangEditor are now built in the form of extensions and modules.

#Chinese Document

WangEditor has detailed Chinese documents and a Chinese communication environment. Because the author open in new window is a domestic programmer.

#Timely feedback and communication

You can also go to github to submit an issue, and the team will give timely feedback or accept it.

#Integrate all functions without secondary development

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

// wangEditor has built-in 50+ menu 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: At the same time, wangEditor has rich APIs and enough extensibility to allow you to customize development menus, modules, plug-ins, etc.

#Easy to apply to Vue React

wangEditor 基于 slate 内核开发，但不依赖于 React ，所以它本身是无框架依赖的。

In addition, we have officially packaged Vue React components, which can be easily used in frameworks such as Vue React.
其他框架，我们会继续支持，大家也可以提交 issue 。

#Step on 5000 pits

wangEditor 开源多年，大量用户使用和反馈，已经解决了很多问题open in new window。在 V5 版本测试过程中，也这些问题进行了重复测试，最大程度保证稳定性。

#Team work, continuous iterative upgrades

wangEditor 早已不是作者单人作战，我们有多人团队，一起修复 bug 、升级功能、跟踪问题、社区答疑。