A Preliminary Study of Online Rich Text Editor

Overview

An online rich text editor is an interface for editing text in a web browser that presents the user with a WYSIWYG editing area. Its advantage is to make full use of the rich performance capabilities of HTML and reduce users' workload of text format conversion. The rich text here is compared to plain text, which differs from plain text in that it has information such as style and typesetting.

working principle

How do online rich text editors work? A R&D engineer of the Yuque team summed it up well, that is, the online rich text editor mainly solves two problems:

1. How to render rich text in the browser.
2. How to edit rich text in browser.

For question 1, since online rich text is running in the browser, it must be the rendering method supported by the browser. At present, the mainstream solutions on the market are to use HTML tags combined with CSS styles to render rich text, and some other rich text editors also use Canvas to render rich text, such as Google Docs.

For question 2, that is, how to input and edit text on the web page. Recalling our usual web browsing, user input is only possible when there are form elements in most cases. For example, the Baidu search we often use, that is an input box for users to input the keywords they want to retrieve. Although form elements such as input and textarea allow users to enter text, they can only enter plain text content, and what we want to implement is a rich text editor. Fortunately, browsers provide a contenteditable attribute for most HTML elements, which can be used to control whether the element can be edited. Enter the following address in the browser address bar and visit, then the entire web page is an editor that can enter text:

Because almost all modern browsers support this property, and this property can take advantage of some default behaviors provided by the browser, it is the best choice for most developers to implement rich text editors using this property.

But there are exceptions to everything. Some powerful teams with rich text editors as their main business will also use simulated cursors and event interception to implement rich text editors. We might as well think about it, when we browse the web at ordinary times, how to judge whether a web page can be edited? In a nutshell, the cursor in this area can be focused, and the characters entered by the user when inputting characters through a device such as a keyboard can be presented in this area. As the saying goes, if it walks like a duck and quacks like a duck, then it is a duck. If we can make an area of a web page focusable with the mouse and allow the user to enter characters on it, then it can be called a rich text editor.

Take Google Docs as an example, when you click on the document area with the mouse, a blinking cursor will appear. When viewing page elements with browser developer tools, you will find that the document editing area is neither an input form element such as input, nor the contenteditabe attribute mentioned above, so why the cursor can focus in this area and display characters what about? It turns out that the cursor you see is just a virtual cursor implemented with HTML and CSS. When you click the document area with the mouse, the page intercepts the click event, calculates the position of the cursor, and draws a virtual cursor in real time. When you enter text, the characters entered by the user are also obtained through intercepted input events, and displayed in the document editing area in real time. Users are unaware of all this, as if they are really writing text in an input and editable area.

Compare the pros and cons

An editor that implements the rich text editing function with the contenteditalbe attribute, and uses HTML and CSS to display the rich text content:

Advantages: Out of the box, you can start editing and typing by adding an attribute to an element. In addition, the browser provides some default behaviors, such as cursor focus and selection highlighting.

Cons: Lack of consistency, both content consistency and presentation consistency. Content consistency occurs when the content in the editor looks the same, but is actually stored with inconsistent HTML structure. For example, when you press Enter in the edit box, whether to add a div tag, a p tag, or a <br/> tag, which may behave differently in different browsers. The performance consistency is that when the stored HTML structure is the same, the display styles in different browsers will also be different. For example, the appearance style of the same button tag will be different in different browsers. A former Medium engineer once published an article called "Why ContentEditable is Terrible". Those who are interested in this aspect can search for this article to read and understand.

Implement an editor that simulates the cursor to intercept user input and uses Canvas to display rich text content:

Pros: High consistency and improved performance. Canvas is just a canvas without any content in itself. We can draw images and text on the canvas through JavaScript, so it can be consistent in different browsers. In addition, when editing a large document, the modification of the document can easily trigger the redrawing and reflow of the browser, which will lead to performance problems. After using Canvas, developers have more room for optimization.

Disadvantage: high complexity. The mouse focus, selection and other operations have to be implemented by yourself. For example, if you move the cursor to the beginning of a word, then drag the selection to the end of the word, the word will be highlighted. You take it for granted, because the browser does this for us. If you intercept user operations and draw with Canvas, then you have to implement all of this yourself, even if the user clicks the mouse, you have to judge whether the user is clicking or dragging. In addition, the rich text drawn through Canvas is unfriendly to SEO, because your content is drawn in the canvas, and search engines cannot perceive it. In the same way, this will also bring trouble to users with visual impairments.

This article was first published on the personal public account, click to read the original text