Permalink
6d3364f Jan 29, 2018
2 contributors

Users who have contributed to this file

@SetCodesToFire @kyuwoo-choi
92 lines (63 sloc) 3.76 KB

Using Extensions

1) Loading Scripts

Using bundler

If you are using webpack or rollup. Use require or import without assigning the returned value to the variables. eg:

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

or with 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>

2) 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']
});

For 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

For 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 are 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

For 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

For 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 this extension. You can see a button appearing on the toolbar.

image

see the example

For 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