We started working on it in May 2020, started building the open source team in June, and finally got V4 ready for release just before the 10.1 holiday. Welcome to the official website to see, also welcome to github star.

Operations team

Working as a team, rather than relying entirely on my own energy, was one of the biggest changes in this refactoring — and while it may not be visible in the product at the moment, it will be more so in the future.

Before this V4 refactoring was launched, wangEditor had been inactive for two years. The reason is that before I was a personal maintenance person, totally dependent on my personal energy. When I get busy, I stop.

Before this V4 refactoring, I did not rashly do it myself, but thought deeply about this problem. So I started recruiting people and building an open source team, albeit slowly at first.

Bug fixes and new feature iterations after V4 release will continue to be carried out as a team. Even if I were busy again, it wouldn’t affect much.

PS: I’ll write a separate long article on how to do open source projects as a team, which I’ve summarized over the past few months. It will be released in a couple of days. (Finished [long article] wangEditor V4.0 exploring open Source projects as a team)

Refactoring with typescript

The project starts directly from 0, refactoring with TS. Ts’s strong typing adds a lot of stability to the code. When recruiting team members, they are required to know TS, which also raises the threshold of recruitment and ensures the technical ability of team members.

New features

Compared to V3, V4 has some common new features:

  • The indentation
  • Line height
  • Full screen
  • Insert the dividing line
  • Code highlighting
  • Drag and drop to resize the image
  • Custom extension menu

Are still under investigation and development:

  • todo
  • A mathematical formula
  • Brush format
  • Upload video
  • View the source code

For other functions, you can give me suggestions or issue.

tooltip

V4 specifically designed the Tooltip mechanism to define, in simple code, an element in the editor area and what menu items are displayed when clicked. This ability is also open to custom extension menus.

Operational stability

For some complex but common operations, V4 has been rediscussed and redesigned to increase operational stability. If undo, paste.

Undo is completely self-fulfilling. Native document.execCommand(‘undo’), native will conflict with other undo. UndoStack and redoStack should be defined to record the current HTML and push the onchange. The relevant source code is here.

When pasting text. The HTML content will be filtered by htmlParser to filter out pastable tags and attrs, judge whether to keep style and IMG, and finally join HTML and paste it into the editor.

Custom extension menu

Starting with V4, users can again customize the extension menu, documentation is here.

The extended menu covers three types of editor: Button DropList and Panel. EventHooks and Tooltip are available. That is, all the menu capabilities of the editor are now open to the user.

communication

  • Join QQ Group (available on official website)
  • Submit the lot issues

Above way, we will give feedback and reply in time.