Editor Guide

At the beginning of

At the beginning of 2020, the team formed the Wiki interest Group, and we were honored to develop the first full-stack project produced for the company at the front end. The essential module of wiki was the editor, and choosing a good open source editor was our first priority.

Markdown editor

After several days of selection, I finally decided to use the tui-Editor, also known as toastUiEditor, which now mainly talks about version 2.5.1.

The editor allows you to edit Markdown documents using text or what you see is what you get, and has syntax highlighting, scroll synchronization, live preview and charting capabilities, and support for custom plug-ins that provide extended capabilities.

The official team has been very helpful, we were using version 2.0 last year, and now we are using version 2.5.1.

😀 😀 😀 😀

There will also be official version 3.0 in 2021, which will be optimized for the internal core editor, and Codemirror will be deprecated.

A derivative version of the editor is also available

Editor usage scenarios

It can be used when there is a need to edit md documents, and it is very extensible. In the Wiki project, we later introduced derivative products such as flowcharts based on this library.

Official Document address

Official Github address

Official NPM address

Corporate Knowledge Base Project (example)

This document is only a user guide. For more information about apis, see the following documents.

Subsequent documents will expand on the Tui-Editor based on the following structure

| - the first part of the constructor parameter | | - options, | | - hooks | | - events | | | -- - other usage in the second part instance methods | | - constructor properties and methods | | - instance related | hook function and event listeners | - instance to obtain input text content objects related | | - instance to get and set the text related | | - instance operation itself | | - instance for the UI related | - the third part derived instance methods | | - CodeMirrorExt | | - MdTextObject | | - DefaultUI | | | - the Toolbar | | | - ModeSwitch | | | - LayerPopup | - the fourth part development plug-in | | - custom development | | - Libraries take some expand | | - syntax highlighting prominent | - the fifth part1.X to2.0Acknowledgement of excessive | - part 6 and other | | - credit and help | | - thinking and overturnedCopy the code

The installation

NPM way

$NPM install @toasts - UI /editor @< version > $NPM install @toasts - UI /editor @< versionCopy the code

CDN import: This method is recommended

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css"></link>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css"></link>

<! The js must be placed after the body tag --> 
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.min.js"></script>
Copy the code

Because the official CDN form has the problem of wall climbing or slow network speed, so when actually using, we put JS CSS on our server.

How to use

Start by adding element nodes that require tui- Editor binding to the HTML

<div id="editorSection"></div>
Copy the code

Editor mode

Import in yarn/ NPM install mode

import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
import Editor from '@toast-ui/editor';

const editor = new Editor({
  el: document.querySelector('#editorSection'),
  initialEditType: 'markdown'.// The default editing mode, but also supports rich text editing mode
  previewStyle: 'vertical', / edit style, also support TAB switching formheight: '300px'
});
Copy the code

The CDN mode is introduced

let editor = new toastui.Editor({
   el: document.querySelector('#editorSection'),
   initialEditType: 'markdown'.// Editor markDown or something else
   previewStyle: 'vertical'.// Whether to cut the page in half, another parameter TAB
   height: window.innerHeight, / / height
   hideModeSwitch: true.// Do not show the bottom TAB switch
   placeholder: 'Please enter a body... '});Copy the code

Display mode

this.viewer = new toastui.Editor.factory({
       el: document.querySelector('#viewerSection'),
       height: window.innerHeight + 'px'.viewer: true.initialValue: 'Initialization value'
});
Copy the code

The above is the use of CDN format, only show the body, use the NPM package when the introduction of toastUI can be removed.

Plugins that come with the editor

A separate NPM or CDN is required

NPM install or yarn add {name}

How do I introduce these plug-ins

const { Editor } = toastui;
const { chart, codeSyntaxHighlight, colorSyntax, tableMergedCell, uml } = Editor.plugin;

const chartOptions = {
  minWidth: 100.maxWidth: 600.minHeight: 100.maxHeight: 300
};

/ / editor
const editor = new Editor({
  el: document.querySelector('#editor'),
  previewStyle: 'vertical'.height: '500px'.initialValue: ' '.plugins: [[chart, chartOptions], codeSyntaxHighlight, colorSyntax, tableMergedCell, uml]
});

// Non-editable views
const viewer = Editor.factory({
  el: document.querySelector('#viewer'),
  viewer: true.height: '500px'.initialValue: allPluginsContent,
  plugins: [[chart, chartOptions], codeSyntaxHighlight, tableMergedCell, uml]
});
Copy the code

Some important APIS

Hook function

addImageBlobHook

When initialized, used to listen for changes in the editor files, so as to customize methods, such as: image upload server

this.editor = new tui.Editor({
   el: document.querySelector('#editorSection'),
   height: window.innerHeight, / / height
   hooks: { // Hook function
       addImageBlobHook: (fileOrBlob, callback) = > {
           this.uploadImgApi(fileOrBlob).then(path= > {
                callback(path, T_T, something's wrong.); }); ,}}});Copy the code

FileOrBlob returns a file object callback function.

The editor object API ToastUIEditor

getCodeMirror

Since the editor flicker cursor is a custom div, the editor provides a method to get the cursor position object. In subsequent source mining, CodeMirror is found to be the tuI-Editor internal core parsing library, which is incorporated into the TuI-Editor.

let getCodeMirror = this.editor.getCodeMirror();
Copy the code

insertText(text)

Insert text, and notice that here he’s recording the last insertion of the cursor position.

this.editor.insertText('```\n\n```');
Copy the code

CodeMirrorExt Cursor object

Obtained by getCodeMirror

Emphasize two

getCursor(start)

Get cursor position start: ‘from’ | ‘to’ | ‘head’ | ‘anchor’

setCursor(line,ch)

This method is not the one that is exposed in the documentation, but one that is known from reading the source code. This method can better control the cursor position

let getCodeMirror = this.editor.getCodeMirror();
this.editor.insertText('```\n\n```');
getCodeMirror.setCursor(getCodeMirror.getCursor().line - 1.0);
Copy the code

The above code first gets the cursor object and inserts the code snippet at the specified position. Since the cursor will move to the end of the code snippet after insertion, affecting the user experience, a setCursor is provided here to set the cursor position to achieve the effect.

Toolbar top shortcut menu API

Method to get the top UI instance

const toolbarArr = [
    {
        name: 'uploadQiniu'.tooltip: 'Select picture'.el: () = > {
            const button = document.createElement('button');
            button.className = 'tui-image tui-toolbar-icons';
            return button;
        },
        index: 14.callback: (_this, callback) = > {
            _this.uploadImg();
            if(callback) { callback(); }}}, {name: 'code'.tooltip: 'Code snippet'.el: () = > {
            const button = document.createElement('button');
            button.className = 'tui-codeblock tui-toolbar-icons';
            return button;
        },
        index: 15.callback: (_this, callback) = > {
            let getCodeMirror = _this.editor.getCodeMirror();
            _this.editor.insertText('```\n\n```');
            getCodeMirror.setCursor(getCodeMirror.getCursor().line - 1.0);
            if(callback) { callback(); }}},]this.toolbar = this.editor.getUI().getToolbar();
     toolbarArr.forEach(toolbar= > {
     this.editor.eventManager.addEventType(toolbar.name);
     this.editor.eventManager.listen(toolbar.name, () = > {
          toolbar.callback(this);
     });
     this.toolbar.insertItem(toolbar.index, {
          type: 'button'.options: {
               name: toolbar.name,
               className: ' '.event: toolbar.name,
               tooltip: toolbar.tooltip,
               el: toolbar.el()
          }
     });
});
Copy the code

This is the recommended way to write it, because later in the project, there will be a lot of new toolbars, so let’s just pull it out and simplify the code by looping through the array.

Custom plug-in

A good framework library can’t be without custom plugins. We have implemented a number of features from the original, and the following articles will detail how these plug-ins are introduced and used.

1. Tree structure

2. Flow chart

3. Insert mathematical formulas

4. Mini Diagram display area

5. Video playback area