Skip to content

Getting Started Korean

์ด์†Œํฌ edited this page Apr 16, 2019 · 14 revisions

Install

TUI Editor ์†Œ์ŠคํŒŒ์ผ ๋ฐ dependency๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ด€๋ฆฌํ•˜๋ ค๋ฉด Bower๋ฅผ ํ†ตํ•ด ๋‹ค์šด๋กœ๋“œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ  : ๋‹ค์šด๋กœ๋“œ ๋ฐ ์„ค์น˜

Set up

์—๋””ํ„ฐ๋ฅผ ์ •์ƒ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋””ํŽœ๋˜์‹œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋“ค๊ณผ css๋“ค๋„ ๊ฐ™์ด ๋กœ๋“œ๊ฐ€ ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

javascript files

  • jquery/dist/jquery.js
  • tui-code-snippet/code-snippet.js
  • markdown-it/dist/markdown-it.js
  • toMark/dist/toMark.js
  • codemirror/lib/codemirror.js
  • highlightjs/highlight.pack.js
  • squire-rte/build/squire.js
  • tui-editor/dist/tui-editor.min.js

css files

  • codemirror/lib/codemirror.css
  • highlightjs/styles/github.css
  • tui-editor/dist/tui-editor.css
  • tui-editor/dist/tui-editor-contents.css

tui-editor.contents.css๋Š” wysiwyg์—๋””ํ„ฐ๋‚˜ ๋งˆํฌ๋‹ค์šด Preview์—์„œ ๋ณด์—ฌ์ง€๋Š” ์ปจํ…์ธ ์˜ ์Šคํƒ€์ผ์ž…๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ๋Œ€๋กœ ์„œ๋น„์Šค ๋ณ„๋กœ ์ˆ˜์ • ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ viewOnly๋ชจ๋“œ์—์„œ ์—๋””ํ„ฐ ์ปจํ…์ธ ๋ฅผ ๋ณด์—ฌ์ค„๋•Œ๋„ ๊ฐ™์€ ์Šคํƒ€์ผ์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="bower_components/markdown-it/dist/markdown-it.js"></script>
    <script src="bower_components/to-mark/dist/to-mark.js"></script>
    <script src="bower_components/codemirror/lib/codemirror.js"></script>
    <script src="bower_components/highlightjs/highlight.pack.js"></script>
    <script src="bower_components/squire-rte/build/squire-raw.js"></script>
    <script src="bower_components/tui-editor/dist/tui-editor-Editor-all.min.js"></script>
    <link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
    <link rel="stylesheet" href="bower_components/tui-editor/dist/tui-editor.css">
    <link rel="stylesheet" href="bower_components/tui-editor/dist/tui-editor-contents.css">
</head>
<body>
<div id="editSection"></div>
<script>
    $('#editSection').tuiEditor({
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        height: 300
    });
</script>
</body>
</html>

์ œ์ด์ฟผ๋ฆฌ ํ”Œ๋Ÿฌ๊ทธ์ธ ์Šคํƒ€์ผ๋กœ ์—๋””ํ„ฐ๋ฅผ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ํ†ตํ•ด ์ง์ ‘ ์ƒ์„ฑ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

var editor = tui.Editor.factory({
    el: document.getElementById('editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: 300
});

Options

  • viewOnly: {boolean}
    • true๊ฐ€ ๋„˜๊ฒจ์ง€๋ฉด ๋ Œ๋”๋ง๋งŒ ๊ฐ€๋Šฅํ•œ ๋ทฐ๋ชจ๋“œ๋กœ ์—๋””ํ„ฐ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋งˆํฌ๋‹ค์šด์„ html๋กœ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.
  • initialEditType: 'markdown' || 'wysiwyg'
    • 'markdown'๊ณผ 'wysiwyg'๋‘˜์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•ด์„œ ์—๋””ํ„ฐ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
  • previewStyle: 'tab' || 'vertical'
    • ๋งˆํฌ๋‹ค์šด์˜ ๊ฒฝ์šฐ preview pane๊ณผ edit pane์„ 2๋‹จ์œผ๋กœ ๋ณด์—ฌ์ค„์ง€ tabํ˜•์‹์œผ๋กœ ๋ณด์—ฌ์ค„์ง€๋ฅผ ์ •ํ•˜๋Š” ์˜ต์…˜์ž…๋‹ˆ๋‹ค.
  • height: {number} || 'auto'
    • ์—๋””ํŒ…์˜์—ญ์˜ ๊ธฐ๋ณธ ๋†’์ด๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
    • 'auto'์ธ ๊ฒฝ์šฐ ์ปจํ…์ธ ์— ๋”ฐ๋ผ์„œ ์—๋””ํ„ฐ๊ฐ€ ๋Š˜์–ด๋‚ฉ๋‹ˆ๋‹ค.
  • events: {object}
    • ์—๋””ํ„ฐ์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์— ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋ฐ”์ธ๋“œ ํ•ฉ๋‹ˆ๋‹ค.
    • ์ด๋ฒคํŠธ ๊ด€๋ จ์ •๋ณด๋Š” ์ด๋ฒคํŠธ ํŒŒํŠธ ํ™•์ธ
  • exts: [string]
    • ์‚ฌ์šฉํ•  ์ต์Šคํ…์…˜๋“ค์„ ๋ฐฐ์—ด๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
    • built-in extensions
      • scrollFollow: ๋งˆํฌ๋‹ค์šด ์—๋””ํ„ฐ์—์„œ ํ”„๋ฆฌ๋ทฐ์˜์—ญ์ด ์—๋””ํŒ… ์˜์—ญ์˜ ์Šคํฌ๋กค์„ ๋”ฐ๋ผ๊ฐ‘๋‹ˆ๋‹ค..
      • colorSyntax: ์ปฌ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ๊ฒŒํ•ฉ๋‹ˆ๋‹ค.
  • hooks: {object}
    • ์—๋””ํ„ฐ ๋‚ด๋ถ€์™€ ์„œ๋น„์Šค์™€ ์—ฐ๋™ํ• ๋•Œ ํ•„์š”ํ•œ ํ›… ํ•จ์ˆ˜๋“ค์„ ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค.
    • previewBeforeHook: ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ํ‘œ์‹œํ•˜๊ธฐ ์ „์— ํ›„ํฌ URL์— ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค.
    • addImageBlobHook : ํŒŒ์ผ blob์„ ์ด์šฉํ•ด ์ด๋ฏธ์ง€๋ฅผ ์„œ๋ฒ„์— ์—…๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.(์ด๋ฏธ์ง€ ์„œ๋ฒ„ ์—ฐ๋™ ํŒŒํŠธ ํ™•์ธ)
  • language: {string}, defualt: 'en_US'
    • ์‚ฌ์šฉํ•  ๋žญ๊ท€์ง€์…‹์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
    • ๊ธฐ๋ณธ ์ง€์› ์–ธ์–ด
      • Korean('ko_KR')
      • English('en_US')
      • Chinese('zh_CH')
      • Japanese('ja_JP') * Nederlands('nl_NL')
    • ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ†ตํ•ด ๋žญ๊ท€์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ํ™•์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.(ํ•˜๋‹จ APIํŒŒํŠธ ์ฐธ์กฐ)

์ด๋ฏธ์ง€ ์„œ๋ฒ„ ์—ฐ๋™

addImageBlobHook์„ ์ด์šฉํ•ด์„œ ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ blob์œผ๋กœ ์ „๋‹ฌ๋ฐ›์•„์„œ ์—ฐ๋™ํ•ฉ๋‹ˆ๋‹ค. ๋ธ”๋กญ์„ ํ†ตํ•œ ์ด๋ฏธ์ง€ ์„œ๋ฒ„ ์—ฐ๋™์€ ์—ฌ๊ธฐ์˜ Handling the upload process for a fileํŒŒํŠธ๋ฅผ ์ฐธ์กฐํ•ด์ฃผ์„ธ์š”

    hooks: {
        'addImageBlobHook': function(blob, callback) {
            //์ด๋ฏธ์ง€ ๋ธ”๋กญ์„ ์ด์šฉํ•ด ์„œ๋ฒ„ ์—ฐ๋™ ํ›„ ์ฝœ๋ฐฑ์‹คํ–‰
            //callback('์ด๋ฏธ์ง€URL');
        }
    }

API

editor.setValue('# Hello');
editor.on('focus', handler);
editor.off('focus');

//Using jQuery plugin interface
$('#editSection').tuiEditor('setValue', '# Hello');
$('#editSection').tuiEditor('on', 'focus');
$('#editSection').tuiEditor('off', 'focus');
  • focus: ์—๋””ํ„ฐ์— ํฌ์ปค์Šค๋ฅผ ์ค๋‹ˆ๋‹ค.
  • hide: ์—๋””ํ„ฐ๋ฅผ ์ˆจ๊น๋‹ˆ๋‹ค.
  • show: ์—๋””ํ„ฐ๋ฅผ ๋ณด์ž…๋‹ˆ๋‹ค.
  • getValue: ์ž…๋ ฅ๋œ ๋งˆํฌ๋‹ค์šด ์ปจํ…ํŠธ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
  • setValue: ์—๋””ํ„ฐ์— ๋งˆํฌ๋‹ค์šด ์ปจํ…ํŠธ๋ฅผ ์…‹ํŒ…ํ•ฉ๋‹ˆ๋‹ค.
  • changeMode: ์—๋””ํ„ฐ์˜ ํƒ€์ž…์„ ๋ณ€๊ฒฝํ•œ๋‹ค("wysiwyg", "markdown")
  • contentHeight: ์—๋””ํ„ฐ์˜ ์ปจํ…ํŠธ ์˜์—ญ์˜ ๋†’์ด๊ฐ’์„ ์ธ์ž๋กœ ๋„˜๊ฒจ ์ง€์ •ํ•˜๊ฑฐ๋‚˜ ํ˜„์žฌ์˜ ๋†’์ด๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค
  • moveCursorToEnd: ์—๋””ํ„ฐ ์ปจํ…์ธ ์˜ ๋งจ๋์œผ๋กœ ์Šคํฌ๋กค๋ฐ ์ปค์„œ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
  • moveCursorToStart: ์—๋””ํ„ฐ ์ปจํ…์ธ ์˜ ๋งจ ์ฒ˜์Œ์œผ๋กœ ์Šคํฌ๋กค๋ฐ ์ปค์„œ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
  • on: ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ์™€ ํ•ธ๋“ค๋Ÿฌํ‰์…˜์„ ํŒŒ๋ผ๋ฉ”ํ„ฐ๋กœ ๋„˜๊ฒจ ์—๋””ํ„ฐ ๋‚ด๋ถ€์ด๋ฒคํŠธ๋ฅผ ๋ฐ”์ธ๋“œ ํ• ์ˆ˜์žˆ์Šต๋‹ˆ๋‹ค.
    • jQuery์˜ ์ด๋ฒคํŠธ ๋„ค์ž„์ŠคํŽ˜์ด์Šค์™€ ๋™์ผํ•˜๊ฒŒ ์ ์šฉํ• ์ˆ˜ ์žˆ์–ด ์ถ”ํ›„ ํŠน์ • ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๋งŒ ์‚ญ์ œํ• ์ˆ˜์žˆ์Šต๋‹ˆ๋‹ค(ex. change.dooray)
  • off : ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋กœ ํŠน์ • ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋งŒ ์‚ญ์ œํ• ์ˆ˜์žˆ์Šต๋‹ˆ๋‹ค
    • editor.off("change"): ๋ชจ๋“  change์ด๋ฒคํŠธ ์ œ๊ฑฐ
    • editor.off("change.dooray"): dooray๋ผ๋Š” ๋„ค์ž„์ŠคํŽ˜์ด์Šค๊ฐ€ ์žˆ๋Š” change์ด๋ฒคํŠธ๋งŒ ์ œ๊ฑฐ
    • editor.off(".dooray"): ๋ชจ๋“  ์ด๋ฒคํŠธ์˜ ".dooray"๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ๊ฐ€์ง„ ํ•ธ๋“ค๋Ÿฌ์ œ๊ฑฐ
  • remove: ์—๋””ํ„ฐ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค
  • i18n.setLang: ๋žญ๊ท€์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ๊ธฐ์กด ๋‚ด์šฉ์˜ ์ผ๋ถ€๋ฅผ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
    • editor.i18n.setLang('en_US', {'Headings': 'Titles'})
    • ๋žญ๊ท€์ง€์…‹ ๋ชฉ๋ก์€ examples์„ ์ฐธ๊ณ ํ•˜์„ธ์š”

Events

  • change: ์—๋””ํ„ฐ์˜ ์ปจํ…์ธ ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋ฐœ์ƒ
  • changeMode: ์—๋””ํ„ฐ ๋ชจ๋“œ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” ๋ฐœ์ƒ
  • stateChange: ์ปค์„œ์ƒ์˜ ์œ„์น˜์— ํ•ด๋‹นํ•˜๋Š” ์ปจํ…์ธ ์˜ ์ข…๋ฅ˜๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋ฐœ์ƒ(bold, italic)
  • keyMap: ์—๋””ํ„ฐ์ƒ์—์„œ ์ž…๋ ฅ๋˜๋Š” ํ‚ค์กฐํ•ฉ๊ด€๋ จ ์ด๋ฒคํŠธ('SHIFT+CTRL+A' ์ด๋Ÿฐ์‹์˜ ํ‚ค์ž…๋ ฅ ๋ฐ์ดํ„ฐ๋ฅผ ์–ป์„์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)
  • removeEditor: ์—๋””ํ„ฐ์˜ remove ๋ฉ”์†Œ๋“œ๊ฐ€ ์‹คํ–‰๋ ๋•Œ ๋ฐœ์ƒ
  • click
  • keydown, keyup
  • focus
  • blur
  • show
  • hide

์ปค์Šคํ…€ ๋ Œ๋”๋Ÿฌ์˜ ์ ์šฉ

Markdown-it์˜ ๊ธฐ๋ณธ HTML ๋ Œ๋”๋ง๊ณผ ๋‹ค๋ฅด๊ฒŒ ๋ Œ๋”๋ง ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, ์—๋””ํ„ฐ์˜ Markdown renderer์ธ tui.Editor.markdownItRenderer๋ฅผ ์ด์šฉํ•ด์„œ ํ™•์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. tui.Editor.markdownitHighlight.ruler์˜ property๋ฅผ ์ด์šฉํ•ด์„œ rendering rule์„ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ์ „, ํ›„ ์ฒ˜๋ฆฌ๋กœ ๋“ฑ๋กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. tui.Editor.markdownitHighlight.use()์— ๋งŒ๋“  ์ธ์ž๋ฅผ ๋„˜๊ฒจ์„œ ์‚ฌ์šฉ์ž plugin์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
const table = function(state, startLine, endLine, silent) {
    // your renderer codes here
};

const taskList = function(markdownit) {
    // your plugin codes here
};

tui.Editor.markdownitHighlight.ruler.at('table', table, [......]);  //replace rule which has name property of 'table'

tui.Editor.markdownitHighlight.use(taskList); 
You canโ€™t perform that action at this time.