[JAVASCRIPT] tui-editor plugin js, css 적용 및 에디터 사용방법

[JAVASCRIPT] tui-editor plugin js, css 적용 및 에디터 사용방법

step1 첨부된 파일을 적절한 경로에 붙여 놓고, 선언합니다.

<link href="/assets/templates/admin/global/plugins/tui-editor/dist/tui-editor.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/templates/admin/global/plugins/tui-editor/dist/tui-editor-contents.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/templates/admin/global/plugins/tui-color-picker//dist/tui-color-picker.min.css" rel="stylesheet" type="text/css" />

<script src="/assets/templates/admin/global/plugins/tui-editor/dist/tui-editor-Editor-full.min.js" type="text/javascript"></script>
<script src="/assets/templates/admin/global/plugins/tui-code-snippet/dist/tui-code-snippet.min.js" type="text/javascript"></script>
<script src="/assets/templates/admin/global/plugins/tui-color-picker/dist/tui-color-picker.min.js" type="text/javascript"></script>
<script src="/assets/templates/admin/global/plugins/tui-editor/dist/tui-editor-extColorSyntax.min.js" type="text/javascript"></script>

step2 에디터 사용을 하기위한 html 로직처리 합니다.

<div id="editSection"></div>

javascript 처리 합니다.

var editor;
var initTuiEditor = function (el, options) { //기본옵션을 설정합니다.
    var defaults = {
        el: document.querySelector(el),
        initialEditType: 'wysiwyg',
        hideModeSwitch: true,
        exts: ['colorSyntax'],
        linkAttribute: {
            target: '_blank',
            contenteditable: 'false',
            rel: 'noopener noreferrer'
        }
    }
    var settings = $.extend({}, defaults, options);
    return new tui.Editor(settings);
}
editor = initTuiEditor('#editSection'); //edit를 셋팅합니다.
content == null?'':editor.setValue(content); //수정 데이터 호출 시 데이터를 셋팅합니다.

샘플 이미지 입니다.

tui 파일입니다.

tui.zip

5.4 MB