preface

On the firstdemoTo worship!

Two months ago I wrote a new version of wangEditor (WIP…). Features and experience introduction, when the new version of the editor was just beginning to be tested internally. Then the main work of these two months:

  • Complete internal testing
  • Writing unit tests
  • Fix high quality bugs
  • Sort out about 4000 issues that Github has accumulated
  • User documentation
  • Improve peripheral functions (Vue3 components, I18N, CI/CD, etc.)

Now that wangEditor V5 has completed internal testing and significant bug fixes, it is open for user public testing.

  • User documentation (written in detail, including: download, use, configuration, API…)
    • Chinese www.wangeditor.com/v5/
    • English: www.wangeditor.com/v5/en/
  • demo
    • Chinese www.wangeditor.com/demo/zh-CN/
    • English: www.wangeditor.com/demo/en/
  • Making source github.com/wangeditor-…

You can also join THE V5 QQ group 681464059, and I will focus on the feedback of this group.

What is public testing?

It’s a free, open test, and some people might think, you’re using yourself as a guinea pig. It’s not, and there’s a fundamental difference — if you’re induced or forced to use it, you’re a guinea pig. And here we’ve told you the truth, you can play with it and then go, it’s not a lab rat.

For the public beta:

  • Interested in open source projects/rich text editors, want to see the features, look at the source
  • In the future, rich text editor needs to use, want to research
  • You are using version V4.x and have some expectations for version V5

In short, it’s something that benefits you personally.

In addition, we will focus on and fix the problems raised during the open beta.

Quick start

Everything you need can be found in the documentation. The basic use of the editor is demonstrated here. PS: This version of wangEditor provides the Vue React component directly.

import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'

// Define the editor configuration
const editorConfig = {}
editorConfig.placeholder = 'Please enter content'
editorConfig.onChange = (editor: IDomEditor) = > {
    // Trigger when editor selection, content changes
    console.log('content', editor.children)
    console.log('html', editor.getHtml())
    console.log('text', editor.getText())
}

Create an editor
const editor = createEditor({
  selector: '#editor-container'.config: editorConfig
})
// Create a toolbar
const toolbar = createToolbar({
  editor,
  selector: '#toolbar-container'
})
Copy the code

This creates a basic editor

Major changes in the new edition

Upgrade L1 ability

The new version deprecates the Document. execCommand API. With Slate. js as the kernel, it wraps its own View layer, so it no longer relies on React.

Based on SLATE’s data model, collaborative editors will be explored in the future. There are already several solutions, such as Slate-YJS and Slate-Collaborative.

57 built-in menus

To see all the built-in menus, execute Editor.getallMenukeys () in the demo. These menus can be configured to be realistic and hidden through menu configuration.

Rich API

The new Version of wangEditor comes with a rich BUILT-IN API that meets all of your editing needs. Include:

  • The config related API
  • Content handling API
  • Node operation API
  • DOM manipulation API
  • Selection district API
  • Custom events
  • (Continue to use the SLate.js API)

Configuration to enhance

The new version adds life cycle Hooks onCreated onDestroyed onChange and maxLength.

In addition, as the editor configuration increases, the editor splits all configurations:

  • Editor configurations such as life cycle, Readonly, Focus, and so on
  • Toolbar configuration, add, delete, sort toolbar menu items
  • Various menu configuration, such as font, line height, color, upload picture, etc

Experience to enhance

The diagram below. Some suitable for drop-down menus, made into a < SELECT > format, better experience.

The diagram below. Can fold up a menu, hover pull reality. For the executable configuration, refer to the documentation.

The diagram below. In different cases, you can automatically disable unnecessary menus to avoid misoperations.

The diagram below. Select text, picture, table, link, you can display hover menu.

In addition, the new version of wangEditor optimizes the functionality of code blocks and makes code highlighting with prism.js a better experience.

Scalability enhancement

SLATE is based on the plug-in mechanism, and the new version of wangEditor is based on the Module extension mechanism. In addition to plug-ins, a module also includes other functions. It is a combination of functional modules. In fact, the built-in functions of the editor are also extended by this module mechanism, which you can see through the source code.

export interface IModuleConf {
  // Register menu
  menus: Array<IRegisterMenuConf>

  // Modal -> view
  renderTextStyle: RenderTextStyleFnType
  renderElems: Array<IRenderElemConf>

  // to html
  textStyleToHtml: TextStyleToHtmlFnType
  textToHtml: TextToHtmlFnType
  elemsToHtml: Array<IElemToHtmlConf>

  / / SLATE plug-in
  editorPlugin: <T extends IDomEditor>(editor: T) => T
}
Copy the code

Refer to the documentation for how to extend it.

Security enhancement

Since document.execCommand is deprecated, you can’t manipulate the DOM directly. It is also based on the data model of SLATE, so vDOM is used for view update. We make vDOM patchView based on snabbdom.js.

Some XSS tools can be filtered using VDOM itself. In addition, special characters are filtered in the part of the code that directly outputs HTML, so there is no risk of XSS at present.

Official provides the Vue React component

The Vue2. X Vue3 and React components are provided, which are easy to use. For details, refer to the documentation.

Other frameworks, like Svelte NG, will be added after release based on user needs.

New version truncated (compared to V4.x)

Todo menu

V4.x has the Todo menu, as shown below:

This feature was temporarily dropped in the new version because it was deemed unnecessary. Also, V5 needs to consider the volume of code and development schedule.

However, if there is a strong demand for this feature during the open beta period, we will develop it optimally. The core needs of users must be guaranteed!

Upload video

The new version only inserts the video link, not uploads the video. Videos are large files, and the uploading mechanism is different from that of images, which is very complicated to implement. There are also requirements for the user’s own server-side interface.

So, no video uploads for now. After waiting for user feedback, and then according to the need to develop, not behind closed doors.

Paste with style (please focus on it!)

If you take a look at all the bugs in wangEditor over the years, you’ll see that pasting is a very large percentage. That is, pasting with styles is a very complex module, and doing it badly will cause a lot of trouble.

It is not suitable for development built into an editor, which is already complex enough. It is suitable for individual development and individual testing. And then integrate it in plug-in form. So, with the style of paste, not do, but later to do separately. In the form of extensions.

Of course, if you want to implement it yourself, you can use the customPaste configuration. But a word of caution: 1. If you write for fun, play with it. 2. If it’s a company project, don’t take it on easily. You may never let it go.

When will it be officially released?

The official launch also has several major events:

  • After a period of public beta, bug fixes
  • During the public beta, the user voice is relatively high function, need to continue to develop
  • Completed unit tests (some non-core apis are not included in unit tests and are in the process of development)

Please feel free to try it out. We will pay close attention to the bugs and features of the new version as it is not officially released.

Thank team members

It took more than 6 months from the research, development to the final internal test for V5. Currently, 2.4W lines of handwritten code are available (I will continue to improve the unit test and write the E2E test code in the future). For this, I would like to thank the team members who participated in the development and testing during this period.

  • 8 members involved in r&d
  • 14 members who participated in the internal testing

Special thanks to

  • EchoLC is responsible for unit testing, CI/CD
  • TGuoW solves the tricky pinyin input problem

conclusion

Ensure the stability of basic functions and basic frames first. After the official release, extend the editor’s ecosystem through plug-ins.

Strive to be the best open source rich text editor for domestic experience!