Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to use the Markdown editor tui.editor, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Tui.editor (TOAST UI Editor) is a WYSIWYG Markdown editor. TOAST UI Editor provides Markdown mode and WYSIWYG mode. It is very powerful, you can edit tables, UML diagrams, charts and so on.

The characteristics of TOAST UI Editor's Markdown mode are:

What you see is what you get. You can preview the generated HTML page while editing the Markdown. Scroll synchronously. You can scroll synchronously between Markdown and preview. The list is automatically indented. The grammar is highlighted.

The characteristics of TOAST UI Editor's WYSIWYG mode are:

You can copy and paste content directly from browsers, excel,powerpoint, etc. Syntax highlighting in 170 + languages is supported. Forms are supported.

Installation

You can install the TOAST UI Editor plug-in through npm or bower.

Npm install-save tui-editorbower install-save tui-editor

Use

HTML structure

The basic structure of using TOAST UI Editor is as follows:

...

...

Initialize the plug-in

Use the following method to initialize the TOAST UI Editor editor.

Var Editor = require ('tui-editor');... var editor = new Editor ({el: document.querySelector (' # editSection'), initialEditType: 'markdown', previewStyle:' vertical', height: '300px'})

Or you can use it as a jquery plug-in.

$('# editSection') .tuiEditor ({initialEditType: 'markdown', previewStyle:' vertical', height: '300px'})

The above initialization configuration parameters are as follows:

Height: the height of the editor, which defaults to auto, can be set to a pixel value, such as 300px.

InitialValue: initial value, which sets the Markdown string.

InitialEditType: initialization is the type of editor, markdown or wysiwyg.

Preview type of previewType:Markdown mode, tab or vertical.

After reading the above, do you have any further understanding of how to use the Markdown editor tui.editor? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.