/tui.editor

ðŸžðŸ“ Markdown WYSIWYG Editor. Chart & UML in markdown syntax.
  1. JavaScript 97.1%
  2. CSS 2.9%
JavaScript CSS
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Download ZIP
Find file
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
test
.bowerrc
.eslintrc
.gitignore
README.md
bower.json
gulpfile.js
karma.conf.coverage.js
karma.conf.js
package.json

README.md

설치

리í¬ì˜ dist ë””ë ‰í† ë¦¬ì˜ íŒŒì¼ë“¤ì„ 다운로드 받아서 사용하실수있습니다. ì´ê²½ìš° bower.jsonì˜ ë””íŽœë˜ì‹œ ë¼ì´ë¸ŒëŸ¬ë¦¬ë“¤ì„ ë”°ë¡œ 받으셔야합니다.

bower를 ì´ìš©í•´ì„œ ì„¤ì¹˜í•˜ëŠ”ê²ƒì„ ì¶”ì²œí•©ë‹ˆë‹¤. 릴리즈노트를 참고하여 #ë’¤ì— ë²„ì „ì„ ì§€ì •í•´ì„œ 설치합니다. 예제는 0.0.7ë²„ì „ì˜ ì„¤ì¹˜ì˜ˆì œìž…ë‹ˆë‹¤.

bower install git@github.com:shiren/tui-editor.git#0.0.7

ì´í›„ ì—…ë°ì´íŠ¸ëŠ” ì•„ëž˜ì™€ê°™ì´ í• ìˆ˜ìžˆìŠµë‹ˆë‹¤.

bower update

ìž„ì‹œ 설치 ê°€ì´ë“œ

현재 ì—디터가 ê°œë°œì¤‘ì— ìžˆìŠµë‹ˆë‹¤. 미리 ì—디터를 ì ìš©í•˜ê¸° 위한 ìž„ì‹œ ë°°í¬ìž…니다. ì—디터를 ì •ìƒì ìœ¼ë¡œ 사용하기 위해서는 í•˜ë‹¨ì— ìƒ˜í”Œ ì½”ë“œì™€ê°™ì´ ë””íŽœë˜ì‹œ js, css 파ì¼ë“¤ê³¼ ì—디터js, css파ì¼ì´ 로드가 ë˜ì–´ì•¼í•©ë‹ˆë‹¤. tui-editor.css는 ì—ë””í„°ì— í•„ìš”í•œ css스타ì¼ë“¤ì´ê³  tui-editor-contents.css는 wysiwygì—디터나 마í¬ë‹¤ìš´ previewì—ì„œ 보여질 컨í…íŠ¸ì˜ ìŠ¤íƒ€ì¼ë“¤ìž…니다. tui-editor-contents.css는 ê¸°í˜¸ì— ë§žê²Œ 수정하실수 있으며 ì—디터를 통해 만들어진 컨í…츠를 보여줄때 ê°™ì€ ë‚´ìš©ì„ ì‚¬ìš©í•˜ì‹¤ìˆ˜ 있습니다.(cssíŒŒì¼ ë‚´ìš© 참고) 아래 예제를 í™•ì¸ ë°”ëžë‹ˆë‹¤.

<!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/code-snippet.js"></script>
    <script src="bower_components/marked/lib/marked.js"></script>
    <script src="bower_components/toMark/dist/toMark.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/build/squire-raw.js"></script>
    <script src="bower_components/tui-editor/dist/tui-editor.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,
        contentCSSStyles: [
            'bower_components/tui-editor/dist/tui-editor-contents.css'
        ],
        events: {
            'load': function() {
                console.log('handler');
            }
        }
    });
</script>
</body>
</html>

옵션 설명

  • initialEditType: 'markdown'ê³¼ 'wysiwyg'둘중 하나를 ì„ íƒí•´ì„œ ì—디터를 시작합니다.
  • previewStyle: 마í¬ë‹¤ìš´ì˜ 경우 preview paneê³¼ edit paneì„ 2단으로 보여줄지 tab형ì‹ìœ¼ë¡œ 보여줄지를 정하는 옵션입니다.(tab, vertical)
  • height: ì—디팅ì˜ì—­ì˜ 기본 높ì´ë¥¼ 결정합니다.(숫ìž, "auto"), "auto"입력시 컨í…ì¸ ì— ë”°ë¼ì„œ ì—디터가 늘어납니다.
  • contentCSSStyles: 위지윅ì—ì„œ ì‚¬ìš©ë  ìŠ¤íƒ€ì¼íŒŒì¼ì„ 지정합니다. 보통 위 예시 처럼 tui-editor-contents.cssì˜ ê²½ë¡œë¥¼ 다시 지정하면ë©ë‹ˆë‹¤.
  • events: 내부 ì´ë²¤íŠ¸ì— 대ì‘하는 핸들러를 셋팅합니다.
    • ì´ë²¤íŠ¸ 목ë¡ì€ 하단 APIíŒŒíŠ¸ì— ìžˆìŠµë‹ˆë‹¤.
  • exts: 사용할 ìµìŠ¤í…ì…˜ë“¤ì„ ë°°ì—´ë¡œ 지정합니다.
    • exts: ['scrollFollow']
    • scrollFollow: 마í¬ë‹¤ìš´ ì—디터ì—ì„œ 프리뷰ì˜ì—­ì´ ì—디팅 ì˜ì—­ì˜ 스í¬ë¡¤ì„ ë”°ë¼ê°‘니다..
    • colorSyntax: 컬러를 사용할수 있게합니다.
  • hooks: ì´ë¯¸ì§€ì„œë²„ì™€ì˜ ì—°ë™ë“±ì„ 처리하는 í›…ì„ ë°”ì¸ë“œí•©ë‹ˆë‹¤.
    • addImageBlobHook : íŒŒì¼ blobì„ ì´ìš©í•´ ì´ë¯¸ì§€ë¥¼ ì„œë²„ì— ì—…ë¡œë“œí•©ë‹ˆë‹¤.

ì´ë¯¸ì§€ 서버 ì—°ë™

ê¸°ì¡´ì— addImageFileHookí›…ì„ ì´ìš©í•´ í¼ì„ 전달하는 ë°©ì‹ì˜ 서버연ë™ì€ 아래 ì˜ˆì œì— í¬í•¨ë˜ì–´ 있지만 deprecatedë©ë‹ˆë‹¤. addImageBlobHookì„ ì´ìš©í•´ì„œ ì´ë¯¸ì§€ 파ì¼ì„ blob으로 전달받아서 ì—°ë™í•©ë‹ˆë‹¤. ë¸”ë¡­ì„ í†µí•œ ì´ë¯¸ì§€ 서버 ì—°ë™ì€ ì—¬ê¸°ì˜ Handling the upload process for a file파트를 참조해주세요

$('#editSection').tuiEditor({
    initialEditType: 'markdown',
    previewStyle: 'tab',
    height: 300,
    contentCSSStyles: [
        'bower_components/tui-editor/dist/tui-editor-contents.css'
    ],
    hooks: {
        'addImageBlobHook': function(blob, callback) {
            //ì´ë¯¸ì§€ ë¸”ë¡­ì„ ì´ìš©í•´ 서버 ì—°ë™ í›„ 콜백실행
            //callback('ì´ë¯¸ì§€URL');
        }
    }
});

API

//아래와 ê°™ì´ ì¼ë°˜ì ì¸ jQuery í”ŒëŸ¬ê·¸ì¸ ì¸í„°íŽ˜ì´ìŠ¤ë¥¼ ì´ìš©í•©ë‹ˆë‹¤.

$('#editSection').tuiEditor('focus');

var content = $("#editSection").tuiEditor("getValue");

$("#editSection").tuiEditor("setValue", "# Hello!!");
  • focus: ì—ë””í„°ì— í¬ì»¤ìŠ¤ë¥¼ ì¤ë‹ˆë‹¤.
  • hide: ì—디터를 숨ê¹ë‹ˆë‹¤.
  • show: ì—디터를 보입니다.
  • getValue: ìž…ë ¥ëœ ë§ˆí¬ë‹¤ìš´ 컨í…트를 가져옵니다.
  • setValue: ì—ë””í„°ì— ë§ˆí¬ë‹¤ìš´ 컨í…트를 셋팅합니다.
  • changeMode: ì—ë””í„°ì˜ íƒ€ìž…ì„ ë³€ê²½í•œë‹¤(ì¸ìžë¡œëŠ” wysiwygê³¼ markdown)
  • contentHeight: ì—ë””í„°ì˜ ì»¨í…트 ì˜ì—­ì˜ 높ì´ê°’ì„ ì¸ìžë¡œ 넘겨 지정하거나 í˜„ìž¬ì˜ ë†’ì´ê°’ì„ ë°˜í™˜í•©ë‹ˆë‹¤
  • on: ì´ë²¤íŠ¸í•¸ë“¤ëŸ¬ì™€ 핸들러í‰ì…˜ì„ 파ë¼ë©”í„°ë¡œ 넘겨 ì—디터 내부ì´ë²¤íŠ¸ë¥¼ ë°”ì¸ë“œ 할수있습니다.
    • jQueryì˜ ì´ë²¤íŠ¸ 네임스페ì´ìŠ¤ì™€ ë™ì¼í•˜ê²Œ ì ìš©í• ìˆ˜ 있어 추후 특정 ì´ë²¤íŠ¸í•¸ë“¤ëŸ¬ë§Œ 삭제할수있습니다(ex. change.dooray)
    • event목ë¡
      • load: ì—디터가 ì •ìƒì ìœ¼ë¡œ 설치ëœí›„ ë°œìƒ
      • change: ì—ë””í„°ì˜ ì»¨í…츠가 변경ë˜ë©´ ë°œìƒ
      • changeMode: ì—디터 모드가 변경ë˜ëŠ” ë°œìƒ
      • stateChange: 커서ìƒì˜ ìœ„ì¹˜ì— í•´ë‹¹í•˜ëŠ” 컨í…ì¸ ì˜ ì¢…ë¥˜ê°€ 변경ë˜ë©´ ë°œìƒ(bold, italic)
      • focus
      • blur
      • show
      • hide
  • off : ì´ë²¤íŠ¸ 핸들러를 제거합니다. 네임스페ì´ìŠ¤ë¡œ 특정 ì´ë²¤íŠ¸ 핸들러만 삭제할수있습니다
    • "change"와 실행시 모든 changeì´ë²¤íŠ¸ 제거 "change.dooray"는 doorayë¼ëŠ” 네임스페ì´ìŠ¤ê°€ 있는 changeì´ë²¤íŠ¸ë§Œ 제거 ".dooray"는 모든 ì´ë²¤íŠ¸ì˜ ".dooray"네임스페ì´ìŠ¤ë¥¼ 가진 핸들러제거
$('#editSection').tuiEditor('on', 'load', handler);
$('#editSection').tuiEditor('on', 'load.dooray', handler);
$('#editSection').tuiEditor('off', '.dooray', handler);
$('#editSection').tuiEditor('off', 'load.dooray', handler);

버전별 ì—…ë°ì´íŠ¸ 유ì˜ì 

  • 0.0.9
    • CSS í´ëž˜ìŠ¤ëª… 대거 수정(ì—디터 ë””ìžì¸ 커스터마ì´ì§•ì‹œ 유ì˜) src/css/tui-editor.css ë³€ê²½ì  ì°¸ê³ 
  • 0.0.8
    • addImageFileHook ì‚­ì œ
  • 0.0.7
    • 네ì´ë° 변경
      • 리í¬ì§€í† ë¦¬ 경로
      • jQuery API명
      • íŒŒì¼ ê²½ë¡œ
  • 0.0.6
    • 디펜ë˜ì‹œ 모듈 code-snippetsì˜ ë„¤ì´ë°ì´ 변경ë¨ì— ë”°ë¼ ì‚¬ìš© ê²½ë¡œë„ ë°”ë€Œì—ˆìŠµë‹ˆë‹¤. tui-code-snippetsì˜ ê²½ë¡œë¥¼ 확ì¸ë°”ëžë‹ˆë‹¤.
  • 0.0.2
    • ì—디터 셋팅한뒤 바로 ì—ë””í„°ì— ì ‘ê·¼í• ë•Œ iframeì´ ì…‹íŒ…ë˜ì§€ ì•Šì•„ 문제가ë ìˆ˜ìžˆìŠµë‹ˆë‹¤. iframeì˜ ì…‹íŒ…ì´ ë¹„ë™ê¸°ë¡œ ì´ë£¨ì–´ì§‘니다. ì—디터를 ìƒì„±í•œì‹œì ì— ì—디터 API를 ì´ìš©í•œë‹¤ë˜ì§€ ì—ë””í„°ì— ì ‘ê·¼í• ë•ŒëŠ” loadì´ë²¤íŠ¸ë¥¼ ì´ìš©í•´ì£¼ì‹œê¸°ë°”ëžë‹ˆë‹¤.
    • ê¸°ì¡´ì— ë””íŽœë˜ì‹œ ëª¨ë“ˆë“¤ì´ ëª¨ë‘í¬í•¨ëœ fullë²„ì „ì´ ì œê±°ë˜ì—ˆìŠµë‹ˆë‹¤ ë”°ë¼ì„œ 디펜ë˜ì‹œ ëª¨ë“ˆë“¤ì„ ì§ì ‘ 로드해야합니다(샘플 참조)