preface

Last week through the wangEditor source code learning, from scratch lifted a compact version of the miniEditor. This article is mainly about some common rich text editor features of some research summary and simple divergent thinking, to enhance personal understanding of rich text editor related ecology.

Implementation of rich text editor

At present, the main implementation methods of rich text editor are as follows

The HTML DOM-based Contenteditable property

Currently, there are two main ways to use the HTML DOM-based Contenteditable properties

Implementation Method 1

The Contenteditable property is based on the HTML DOM and is implemented using Document. execCommand

The advantages and disadvantages of using this method such as wangEditor,CKEditor, document. ExecCommand are as follows

The main advantages

  1. Based on the browser’s native editing capabilities, the input is very smooth
  2. No IME (combined input) headaches
  3. Development and implementation costs are lower and simpler than other approaches

Main drawback

  1. The DOM generated by different browsers cannot be unified
  2. Different browsers may have different implementations of the same operation (such as basic bold, italic, and Enter), making it difficult to achieve complete unification of presentation and data
  3. View logic cannot be abstracted into some generic data model management
  4. Support for collaborative functionality is difficult because the view cannot be abstracted into a data model

Implementation Method 2

Customize commands through data model interaction with views based on HTML DOM Contenteditable properties

This approach requires the design of a data model for internal use, which is bound to the view seen by the user in the editor. The wySIWYG effect of the editor is realized by capturing the user’s operation behavior, adjusting the original modified DOM to the modified data model, and then mapping the updated state to the view. The implementation method is similar to the current popular MVVM data-driven rendering idea.

  • Using the way of a Quill, for example, ProseMirror, Draft, js, Slate. Js. The main differences between these frameworks are the internal data model definitions and some view frameworks. There are also big differences in how the code is organized and implemented. For more details, read the evolution of open source rich text editor technology

The main advantages

Addresses some side effects in Document. execCommand, such as

  1. The same operation is implemented consistently in different browsers
  2. View logic is managed through a unified data model
  3. It’s easier to support collaborative functionality later

Main drawback

The biggest drawback that can be thought of is the higher implementation complexity compared to the previous one. Other more specific shortcomings because the understanding is not deep enough, and then summarize.

Do not use Contenteditable

Independent selection cursor and content typesetting and editing functions, completely independent of browser editing function.

  • There is no open source rich text editor scheme for this method, but there are probably Google Doc and Tencent Documents for closed sources. Tencent document rich text function according to the DOM it shows a simple understanding, may be based on canvas to achieve document editing related functions, the specific content of the document itself what kind of model and detailed architecture may need to wait for Tencent document internal bigwigs to release some relevant sharing documents.
  • Aside from the rich text function, we simply look at the solutions to independently implement editing functions. We investigated the open source CodeMirror and VSCode Monaco. CodeMirror has very little code in its initial release, but a lite version will be developed to learn how to implement custom editing.

other

In addition to the above methods, such as iframe, textarea can also implement simple rich text functions, which are probably not used in the mainstream rich text editors.

divergent

All of the above rich text editors are web-based implementations. The definition of rich text editing on Baidu also defines it as a WYSIWYG text editor embedded in the browser. A rich text editor should be more than just a Web browser, and can be implemented as a standard on different platforms or hosts. The embedded host can be a browser, native APP, native desktop application. The standard conformance approach can be divorced from the Web. The rich text editor extracted from the data model and then implemented editing functions for different platforms can achieve better rich text editing functions.

The last

I am a beginner of rich text editor at present, the above summary and arrangement will inevitably have mistakes or description is not correct, welcome to point out the brick.

The resources

Evolution of open source rich text editor technology