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.

But they all have the following problems (knock the blackboard ~), which may greatly affect your development efficiency, development costs and product stability.

#Technology is old

For example, UEditor KindEditor still uses the document.execCommand API. This will greatly affect the stability and scalability of the product.

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.

A large number of secondary development will not only lead to a significant increase in R & D costs (closed this month ~), but may also cause endless bugs to appear due to imperfect testing and fall into quagmire.

PS: Unless you have strong customization development needs.

#Constraints with frameworks

For example, Slate and Draft rely on the React framework. If you want to use Vue, the workload and difficulty are very large.

#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.

Select stable products, please refer to

github stars

npm downloads

Npm release time and frequency

Number of related results from search engines

Is there any endorsement by a major manufacturer

Are there unit tests/e2e tests

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.

#Using mainstream technology

WangEditor started with the V5 version and has major technical updates.

#1. Upgrade to L1 capabilities

The document.execCommand API has been abandoned and slate.jsopen in new window (but does not rely on React) has been used as the kernel, and upgraded to L1 capabilities.

This is also the technical solution of current mainstream rich text editors, such as the well-known Quill ProseMirror Draft.

#2. Using vdom

Use vdom technology (based on snabbdom.jsopen in new window) to update the view, separate the model and view to increase stability.

#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 has all common rich text operation functions built-in, which can meet most usage requirements. You can simply configure and use it directly, and there is no need for secondary development.

// 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 is developed based on the slate kernel, but does not rely on React, so it itself is frame-free.

In addition, we have officially packaged Vue React components, which can be easily used in frameworks such as Vue React.
We will continue to support other frameworks, and you can also submit issues.

#Step on 5000 pits

WangEditor has been open source for many years, and a large number of users have used it and given feedback. It has solved many problems open in new window. During the V5 version testing process, these issues were repeatedly tested to ensure stability to the greatest extent.

#Team work, continuous iterative upgrades

WangEditor is no longer an author working alone. We have a multi-person team working together to fix bugs, upgrade features, track problems, and answer questions in the community.