Opening chapter of online document technology - rich text editor

Opening chapter of online document technology disclosure - Rich text editor

Preface

This article aims to introduce the core module of online document rich text editor technology , It also introduces how to select rich text editor technology for mainstream business document products in the industry .

Rich text editor

Rich text editor ,Rich Text Editor, abbreviation RTE, It can be embedded in the browser , WYSIWYG text editor .

Rich text editor - Common interactions

• Content input area
• Input content
• district & operation
• The action bar
• Top Toolbar
• Sidebar
• Embedded toolbar
• Right click menu

Rich text editor - classification

Rich text editors usually do 3 Grading ：L0、L1 and L2

L0

Rely on browser features , Mainly used designMode、ContentEditable、webkit-user-modify、execCommand Other characteristics . Early editors used this approach , But the customizable space is limited . For example, early technology products WYSIWYG Editor.

<div class="kuaishou" contentediable="true"> Please enter the text </div> <!--  Rich text input box  -->




documennt.execCommand('bold'); // operation 
 Copy code 

L1

L1 stay L0 Continue to use browser features based on 、DOM Of API From the main implementation Selection、Range、Element、TextNode etc. , It has certain scalability , But there will be many difficult problems . Major commercial products include graphite documents （Quill）, Tencent documents （Etherpad ACE）, Flying book document (Etherpad ACE), Language bird document （slate, lake）, Impression notes （PromiseMirror）,Confluence WIKI as well as SAAS Knowledge base integrated within the product （Teambition Thoughts、Pingcode wait ）; Technical products include CKEditor、TinyMCE、Draft.js、 Slate、Quil.js 、ACE wait , Usually we're right about L1 From the layout implementation, the editor is also divided into 【 The traditional model 】 and 【MVC Pattern 】

• The traditional model

DOM Tree equals data , Use DOM API Direct manipulation （CKEditor 4、TineMCE、UEditor）

• MVC Pattern

Data and rendering are separated , After data model changes , The data changes （Slate、CKEditor 5、Quil.js）

L2

Custom input and actions , Include cursor 、 typewriting 、 Delete and other basic actions , Have the ability of drawing and layout . Major commercial products include Google Docs、 Office Word Online、WPS And light bird documentation .

Rich text editor - contrast

Add ：Google Docs、WPS as well as Office Online The reason why you experience extreme performance , Rich product experience , It also comes from the huge R & D costs .

Rich text editor - Technology selection

From the perspective of team size

• The product content experience is simple , And the lack of editor developers , Direct use is recommended Quill、 Slate.js、CKEditor、TIngMCE Secondary development .
• Integrated lightweight knowledge base within the product , Yes 5 Editor development team within people ： Self research is recommended L1 Level editor 、
• Take collaborative editing as the core of the product , Layout benchmarking Office, The number of editor developers exceeds 20+ Editor development team : Self research is recommended L2 Editor .

From the perspective of the essential features of the editor

1. Robustness, - The stability of the editor is the lifeline of the editor .
2. Excellent architecture
3. Be able to define a document model , And it can distinguish whether two document models are visually equal in a simple way .
4. good MVC framework , Create one in DOM Mapping to the model , And have a complete hierarchy
5. The ability to define well behaved editing operations on the document model （operation）.
6. Maintainability - The amount of rich text editor code increases with iterations , So it is very important to maintain it in a simple and reliable way
7. Extensibility - Excellent plug-in mechanism , Excellent extended iteration capability .

userInput→ Action → Edit → Operation → Command → Mutation → Model → View（Layout,Redraw）→ DOM

block-style editor

similar Notion perhaps Notion LIke The product belongs to the new block level editing experience notes , Have unlimited levels of pages and blocks ,Back Link as well as Database Experience , It is obviously different from the traditional rich text editor in product experience , This article does not focus on , If you are interested, you can read editorjs.io/

L2 Rich text editor Overview

classification

Belong to L2 level

Development mode

• The core input area of the editor is native JavaScript Realization
• Top action bar , Sidebar , Inline bar , Various plug-ins are based on React/Vue/ Native JavaScript Can be realized

Core module

1. Edit engine & Calculation engine

Independent document model , Manage documents Model And View Mapping between

2. Layout engine

Re implement the rendering layout engine , Replace the browser default layout implementation

3. Collaborative engine

Multi person cooperative operation OT, Support multi person online collaborative editing at the same time

4. Plug in engine

Support editor block The key capability of urbanization

Key design

• command Atomic operation abstraction and design
• Architecture layering of large front-end software , Open to expansion , Closed for modification