wedge

It has been more than half a year since I joined the wangEditor team.

WangEditor V4 has also become more stable.

At present, due to a task, I want to make an overall review of the current wangEditor.

I. Project introduction

WangEditor is a TypeScript rich text editor for the Web.

The flagship light weight, simple, easy to use

The goal is to make the best open source Web rich text editor in China!

I am inwangEditorThings I’ve done

The following functions have been done in the early stage:

  1. reference
  2. Insert the video
  3. The indentation
  4. The sequence
  5. multilingual
  6. auto focus
  7. Enrich and optimize the functions of internal core modules, such as:GetNodeTop, getSelectionRangeTopNodes, prev, next, CSS, etc.
  8. And a few bugs and tests

In the latewangEditorResponsible for:

  1. issues 和 bugReply and collect
  2. For the collectedissues 和 bugclassify
  3. Assign tasks
  4. To participate incode review

Ii. Project Background

There are many business scenarios for rich text editors, such as:

  1. Message board
  2. email
  3. blog
  4. The news media
  5. community
  6. tieba
  7. The document
  8. database
  9. .

One thing these scenes all have in common is that what you see is what you get.

This is also a business pain point addressed by rich text editors.

Developing a simple rich text editor is actually quite easy, with a simple understanding of the use of Contenteditable, execCommand, Selection, and Range.

Of course, there are a number of issues with the editor, such as execCommand actually marking deprecated on MDN.

The implementation and support for execCommand varies from browser to browser, and the capabilities execCommand provides are fairly simple.

So while it’s easy to develop a simple rich text editor, making a good rich text editor is incredibly difficult, requires all sorts of weird problems, and execCommand has very limited capabilities. As a result, many rich text editors have abandoned the browser-provided execCommand and developed their own execCommand, or even implemented their own rich text input fields, relying only on a few browser apis.

Third, code structure

The contents of this section can be found in doc under the Doc directory in the Github repository of wangEditor

Technology selection

WangEditor itself does not rely on any framework

  • Language used:TypeScript
  • Packaging tools:Webpack
  • Test tools:Jest, cypress,

The main directory

  • .github/workflowsGithub Actions configuration file
  • .vscodeVscode editor configuration (recommended)
  • attachmentAttachments, unrelated to program operation, but cannot be deleted
  • buildWebpack configuration
  • distPackage the output of the catalog. There is no directory when just downloaded, run locallynpm run buildCan be generated
  • docsDevelopment of the document
  • examplesHTML file for the local test
  • serverServer, used to tune the function of picture or file upload
  • srcEditor code
  • testUnit test code
  • cypressE2E Tests code

Src directory

  • wangEditor.tsThe total entry
  • assets/CSS font file image
  • config/Editor default configuration. There are many configuration items, so multiple files are split based on classification.
  • editor/Editor core functions
    • index.tsImport file, output editor class
    • change/Editor change capture
    • disable/Disabling the editor
    • history/The historical record
    • init-fns/Initialization function
    • upload/File upload low-level capability
    • z-index/The hierarchy
    • command.tsencapsulationdocument.execCommand
    • selection.tsencapsulationSelection 和 Range
  • lib/Third-party JS lib used (cannot be installed via NPM)
  • menus/Menu bar and menu
    • index.tsThe menu bar in the class
    • menu-constructors/Classes used to generate individual menus
    • menu-list.tsPut together all the menus
    • Other folders, specific to each menu, e.gbold link 等
  • text/Text editing area
    • index.tsImport file, output class, encapsulate each API
    • event-hooks/Initialize the various event hooks of text, such as carriage return, paste, and delete
    • paste/Handling paste Events
    • getChildrenJSON.tsGets jSON-formatted data for the child element
    • getHtmlByNodeList.ts 从 nodeList jsonFormat to generate DOM elements
  • utils/tool
    • const.tsconstant
    • dom-core.tsEncapsulation of DOM operations
    • util.tsVarious utility functions
    • custom-eventCustom events
    • polyfillCompatible with
    • data-structure/The data structure
    • observer/Encapsulation MutationObserver

5. Create process

6. Menu construction

7. Structural relations

In fact, as you can see from the following figure, wangEditor is starting to get a little messy as it continues to be upgraded, iterated, and repaired.

Many functions and modules depend on each other and are coupled together, and some chain reactions begin to appear in Bug repair. For example, A modifies Bug A, resulting in Bug B. B fixes Bug B, and Bug A reappears.

This is also our editor urgently need to break through and solve the problem, is also the main reason FOR me to do this review

Eight, summary thinking

In fact, I am only familiar with wangEditor, a rich text editor, and know little about other famous rich text editors. As a developer of rich text editor, this is not qualified. In this regard, I should strengthen my in-depth research in the field of rich text editor.

In addition, DURING this period, I was actually interviewing for a job. On the one hand, I was forced by the pressure of life, and on the other hand, I wanted to seek a breakthrough in technology. At the same time, during the interview and in this task, I often had a feeling of not knowing what to do, which made me realize that I had a weak foundation, a poor understanding of thinking patterns and design patterns, a lack of basic knowledge, and a weak architectural thinking, etc., so I still need to redouble my efforts.

Finally, if you are interested in rich text editors and open source projects, please join our wangEditor team

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign