preface

This paper mainly records the realization of a simple rich text editor main ideas and development processCopy the code

Functional description

  1. In terms of functional areas, rich text editors generally include two parts: menu bar and text editing area. The menu bar is used to set the text format of the input box, such as font size, font color, size, title, background, line height, reduction, and so on. The text editing area is used to enter rich text content.

  2. Because the goal is to achieve a simple but rich text editor containing rich text main function, here only select title, bold, font color three menu functions to achieve.

Realization principle & idea

  • The core principle is to adapt elements to an editable state based on html5’s contenteditable properties. Then, when the menu is clicked, the Document. execCommand method is called to manipulate the elements of the editable content area to adjust the format of the edited state.
  • The development ideas mainly refer to the current mainstream open source wangEditor in China, including the same project framework, module division and implementation principle. It can also be understood as a simplified version of the miniEditor extracted from the process of learning wangEditor source code
  • rendering

The development process

  1. The first step is to build the framework

The framework section of the project has been deleted based on the reference to wangEditor. For example, the server section uses only static services, and examples has only one index.html configured for development and debugging, mainly including the following content.

  • Build build script
  • Server (KOSa-based static service, used for local development and debugging)
  • Examples Sample files (also debug files)
  • Package. json build script configuration.
  1. SRC code module partition

The SRC section of the code consists of the following sections

  • Assets font icon and less static file
  • Editor Main editor class
  • Menus related classes

  1. Core code Description
  • The Editor is mainly implemented by the Editor class, including the dynamic creation of rich text areas, and initialization of content such as the menu text area.
class Editor {
    public editorSelector: HTMLElement 

    public toolbarElem : HTMLElement
    public textContainerElem : HTMLElement
    public textElem : HTMLElement

    public menus : Menu[]

    public selectionApi : SelectionApi
    constructor(textSelector: HTMLElement){
        this.editorSelector = textSelector;
        this.toolbarElem =  document.createElement('div');
        this.textContainerElem = document.createElement('div');
        this.textElem = document.createElement('div');

        this.menus = [];
        this.selectionApi = new SelectionApi(this);

        this.initFramework();

        this.initMenu();

        this.initText();
    }
Copy the code
  • The menu class is shown in bold. The main steps are to initialize the DOM structure of the menu, bind the click event, and then, when clicked, return the selection and execute document.execCommand. Font and color menus are implemented in a similar way, but the main difference is that there is a drop-down menu. ExecCommand is executed under the drop-down menu, and an additional parameter will be added
class Bold extends Menu implements MenuActive { constructor(editor: Editor){const elem = createElemByHtml(' <div class="mini-menu-item" data-title=" bold">< I class="mini-e-icon-bold"></ I > </div> `); super(elem[0], editor) } public clickHandler(): void { this.editorInstance.selectionApi.restoreSelection(); document.execCommand('bold', false); } public changeActive(): void { const editor = this.editorInstance } }Copy the code

Summary & Harvest

  • The code for this rich text editor is primarily learned from wangEditor. In order to achieve as simple as possible the function of the file as little as possible, some of the functions have been deleted. For example, you don’t use your own DOM class like jquery, but use native methods to manipulate the DOM directly. Delete the inheritance class of the drop-down menu. Deleted the functions of other non-static services in server. Deleted configuration items and plug-in extensions. There are only five main code classes.
  • By studying the source code of wangEditor, I have gained a general understanding of the implementation of a lightweight rich text editor, and deepened my understanding of TS and WebPack.

Those who want to see the code can check out the Github repository here