preface

This paper aims to introduce the rich text editor technology, the core module of online documents, and introduce how to select the rich text editor technology for mainstream commercial documents in the industry.

Rich text editor

Rich Text Editor, or RTE for short, is a wySIWYG Text Editor that can be embedded in the browser.

Rich text editor – Common interaction

  • Content entry area
  • The input
  • Selection & operation
  • The action bar
  • Top toolbar
  • The sidebar
  • Built-in toolbar
  • Right click on the menu

Rich text editor – Hierarchical

Rich text editors typically do three levels: L0, L1, and L2

L0

It relies on browser features, including designMode, ContentEditable, Webkit-user-modify, and execCommand. Early editors took this approach, but there was limited room for customization. Take the WYSIWYG Editor, an early technology product.

<div class="kuaishou" contentediable="true"> Please enter the text </div> <! --> Documennt. ExecCommand ('bold'); / / operationCopy the code

L1

On the basis of L0, L1 continues to use browser features and DOM API to independently implement Selection, Range, Element, TextNode, etc., which has certain scalability, but also has many difficult problems to be solved. Major commercial products include Graphite Documentation (Quill), Tencent Documentation (Etherpad ACE), Flying Book Documentation (Etherpad ACE), Verbal Sparrow Documentation (SLATE, Lake), PromiseMirror, Confluence WIKI and knowledge base integrated with SAAS products (Teambition Thoughts, Pingcode, etc.); Technical products include CKEditor, TinyMCE, draft.js, Slate, Quil, ACE, etc. Generally, L1 editor can be divided into [traditional mode] and [MVC mode] from the layout implementation mode.

  • The traditional model

DOM trees are equal to data, manipulated directly using the DOM API (CKEditor 4, TineMCE, UEditor)

  • The MVC pattern

Data is separated from rendering, data changes occur only after the data model changes (Slate, CKEditor 5, Quil)

L2

Customize input and operation, including cursor, input method, delete and other basic actions, drawing and layout. Major commercial products include Google Docs, Office Word Online, WPS, and Lightbird Documents.

Rich text editor – Contrast

Side note: Google Docs, WPS, and Office Online have the highest performance and product experience due to their high r&d costs.

Rich text editor – Technology selection

From a team size perspective

  • It is recommended to directly use Quill, Slate.js, CKEditor, TIngMCE for secondary development.

  • Lightweight knowledge base is integrated in the product, and there is an editor development team of less than 5 people: self-developed L1 level editor is recommended,

  • Collaborative editing as the core of the product, typesetting and layout standard Office, editor developer size of more than 20+ editor research and development team: recommended self-developed L2 editor.

From the perspective of essential editor features

  1. Robustness – Editor stability is the lifeblood of an editor.
  2. Good architecture
  3. The ability to define a document model and an easy way to tell whether two document models are visually equivalent.
  4. A good MVC architecture that creates a mapping between the DOM and the model and has complete layering
  5. The ability to define well-performing edit operations on the document model.
  6. Maintainability – The amount of rich text editor code increases with iteration, so it is important to be able to maintain it in a simple and reliable way
  7. Extensibility – Excellent plug-in mechanism, excellent ability to extend iteration.

UserInput → Action → Edit → Operation → Command → Mutation → Model → View (Layout, Redraw) → DOM

block-style editor

< span style = “box-sizing: border-box; color: RGB (74, 74, 74); display: block; line-height: 22px; font-size: 14px! Important; white-space: inherit! Important; word-break: inherit! Important;” To get started, read editorjs.io/

Overview of L2 rich text editor

classification

Belong to the L2 level

Development mode

  • The core input area of the editor is implemented using native JavaScript

  • React/Vue/ native JavaScript plugins are available

The core module

1. Editing engine & Computing Engine

A separate document Model that manages the mapping between document Models and Views

2. Layout engine

Re-implement the render layout engine instead of the browser’s default layout implementation

3. Synergy engine

Multi-user OT operation supports simultaneous online collaborative editing

4. Plug-in engines

Key ability to block the editor

The key design

  • Atomic operation abstraction and design of command
  • The architecture of large front-end software is layered, open for expansion and closed for modification