Skip to content

Latest commit

 

History

History
91 lines (63 loc) · 3.69 KB

using-extensions.md

File metadata and controls

91 lines (63 loc) · 3.69 KB

Using Extensions

Loading Scripts

Using bundler

If you are using webpack or rollup. require or import without assign it like below

require('tui-editor/dist/tui-editor-extChart');

or in es6 syntax

import 'tui-editor/dist/tui-editor-extChart';

The bundlers with tree-shaking enabled will eliminate the extensions if you assign a variable which won't be used.

Using bower or direct download

Add script tag right after editor script.

<script src="./bower_components/tui-editor/dist/tui-editor-Editor.js"></script>
<script src="./bower_components/tui-editor/dist/tui-editor-extChart.js"></script>

Enable Extension

Once you have loaded extensions via bundler or script tag, you should let editor know to enable the extensions. Give exts option an string array. Each of the string should be a valid extension name.

var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px',
    exts: ['chart', 'uml']
});

UML

You can draw many kind of UML Diagram using plantUML.

image

Load script 'tui-editor/dist/tui-editor-extUML.js' and enable uml extension by exts: ['uml'] option.

see example here

Chart

You can draw chart from TSV, CSV data format using tui-chart

image

Load script 'tui-editor/dist/tui-editor-extChart.js' and enable the extension by exts: ['chart'] option. The code block format looks like this.

image

  • data & option block separated by one or more blank lines
  • data block come first, TSV, CSV or White-Space Separated Values
  • option block follows, each option is tui-chart option in dot notation.

see the example

Table

You can draw merged table cells.

image

Load script 'tui-editor/dist/tui-editor-extTable.js' and enable the extension by exts: ['table'] option.

image

see the example

Color Syntax

You can color text by toolbox easy.

image

Load script 'tui-editor/dist/tui-editor-extColorSyntax.js' and enable the extension by exts: ['colorSyntax'] option.

Once you enable the extension. You can find a button on toolbar appears.

image

see the example

Scroll Sync

Sync markdown editor & preview scroll. You can toggle sync mode by click on blue scroll on button on toolbar.

image

Load script 'tui-editor/dist/tui-editor-extScrollSync.js' and enable the extension by exts: ['scrollSync'] option.

see the example