/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
karma.conf.ne.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,
        events: {
            'load': function() {
                console.log('handler');
            }
        }
    });
</script>
</body>
</html>

옵션 설명

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

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

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

$('#editSection').tuiEditor({
    initialEditType: 'markdown',
    previewStyle: 'tab',
    height: 300,
    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: ì—ë””í„°ì˜ ì»¨í…트 ì˜ì—­ì˜ 높ì´ê°’ì„ ì¸ìžë¡œ 넘겨 지정하거나 í˜„ìž¬ì˜ ë†’ì´ê°’ì„ ë°˜í™˜í•©ë‹ˆë‹¤
  • moveCursorToEnd: ì—디터 컨í…ì¸ ì˜ ë§¨ë으로 스í¬ë¡¤ë° 커서ì´ë™í•œë‹¤.
  • moveCursorToStart: ì—디터 컨í…ì¸ ì˜ ë§¨ 처ìŒìœ¼ë¡œ 스í¬ë¡¤ë° 커서ì´ë™í•œë‹¤.
  • on: ì´ë²¤íŠ¸í•¸ë“¤ëŸ¬ì™€ 핸들러í‰ì…˜ì„ 파ë¼ë©”í„°ë¡œ 넘겨 ì—디터 내부ì´ë²¤íŠ¸ë¥¼ ë°”ì¸ë“œ 할수있습니다.
    • jQueryì˜ ì´ë²¤íŠ¸ 네임스페ì´ìŠ¤ì™€ ë™ì¼í•˜ê²Œ ì ìš©í• ìˆ˜ 있어 추후 특정 ì´ë²¤íŠ¸í•¸ë“¤ëŸ¬ë§Œ 삭제할수있습니다(ex. change.dooray)
    • event목ë¡
      • load: ì—디터가 ì •ìƒì ìœ¼ë¡œ 설치ëœí›„ ë°œìƒ
      • change: ì—ë””í„°ì˜ ì»¨í…츠가 변경ë˜ë©´ ë°œìƒ
      • changeMode: ì—디터 모드가 변경ë˜ëŠ” ë°œìƒ
      • stateChange: 커서ìƒì˜ ìœ„ì¹˜ì— í•´ë‹¹í•˜ëŠ” 컨í…ì¸ ì˜ ì¢…ë¥˜ê°€ 변경ë˜ë©´ ë°œìƒ(bold, italic)
      • focus
      • blur
      • show
      • hide
      • keyMap: ì—디터ìƒì—ì„œ ìž…ë ¥ë˜ëŠ” 키조합관련 ì´ë²¤íŠ¸ë¥¼ ë°œìƒí•œë‹¤.('SHIFT+CTRL+A' ì´ëŸ°ì‹ì˜ 키입력 ë°ì´í„°ë¥¼ ì–»ì„수 있다)
  • 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);

Extension API

mark

í…스트 셀렉션 ê¸°ì¤€ì˜ ë§ˆì»¤ë¥¼ 추가하거나 관리하여 ì‚¬ìš©ìž UI와 ì—°ë™í•  수 있습니다.. demo-marker.htmlê³¼ demo-viewOnlyMarker.html를 참조하세요.

  • setValueWithMarkers(마í¬ë‹¤ìš´, 마커ë°ì´í„°): ì—ë””í„°ì— í…스트를 셋팅하면서 해당컨í…ìŠ¤íŠ¸ì˜ ë§ˆì»¤ë°ì´í„°ë¥¼ 복구합니다. 마커ë°ì´í„°ëŠ” exportMarkersë¡œ 얻어진 ë°ì´í„°ìž…니다.
$('#editSection').tuiEditor('setValueWithMarkers', '# TEXT', 마커ë°ì´í„°);
  • addMarker(ì•„ì´ë””): ì—ë””í„°ì˜ í˜„ìž¬ ì…€ë ‰ì…˜ì— ë§ˆì»¤ë¥¼ 삽입합니다. 마커를 구별할 ì•„ì´ë””를 입력합니다, ë§ˆì»¤ì˜ ì •ë³´ê°€ 담긴 ê°ì²´ê°€ 리턴ë©ë‹ˆë‹¤.
var marker = $('#editSection').tuiEditor('addMarker', 'm1');
  • selectMarker(ì•„ì´ë””): ë§ˆì»¤ì˜ ì…€ë ‰ì…˜ì„ ìƒì„±í•©ë‹ˆë‹¤.
  • clearSelect(): ì…€ë ‰ì…˜ì„ ì·¨ì†Œí•©ë‹ˆë‹¤.
  • exportMarkers(): 현 컨í…ì¸ ì˜ ë§ˆì»¤ì •ë³´ë¥¼ 저장하기위해 모든 ë§ˆì»¤ì˜ JSONë°ì´í„°ë¥¼ 받습니다
  • getMarker(ì•„ì´ë””): 특정 ì•„ì´ë””ì˜ ë§ˆì»¤ 정보를 얻습니다.
  • getMarkersAll(): 모든 마커정보를 얻습니다.
  • removeMarker(ì•„ì´ë””): 마커를 삭제합니다., ì‚­ì œëœ ë§ˆì»¤ì •ë³´ê°€ 리턴ë©ë‹ˆë‹¤
  • ì´ë²¤íŠ¸
    • markerUpdated: ë§ˆì»¤ì˜ ìœ„ì¹˜ê°€ ì—…ë°ì´íŠ¸ë˜ê±°ë‚˜ 추가ë˜ë©´ ì´ë²¤íŠ¸ê°€ ë°œìƒí•©ë‹ˆë‹¤. ì¸ìžë¡œ 모든 마커정보가 넘어갑니다

커스텀 ë Œë”ëŸ¬ì˜ ì ìš©

marked를 확장해 추가ì ì¸ 마í¬ë‹¤ìš´ì„ ì‚½ìž…í•˜ê³ ìž í•œë‹¤ë©´ tui.Editor.markedRenderer를 ì´ìš©í•´ì„œ 확장하세요. ì—디터ì—ì„œ 사용하는 ë Œë”러입니다. ë®ì–´ì“°ì§€ ë§ê³  확장해서 사용해주세요

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

  • 0.5.0
    • 위지윅ì—디터ì—ì„œ iframeì´ ì œê±°ë˜ì—ˆìŠµë‹ˆë‹¤.
    • contentCSSStylesì˜µì…˜ì´ ë”ì´ìƒ 필요없어졌습니다.(deprecated)
  • 0.4.0
    • viewOnly ì˜µì…˜ì´ ì¶”ê°€ë˜ì—ˆìŠµë‹ˆë‹¤. true를 넘기면 html ë Œë”ë§ë§Œ 가능한 뷰모드로 ì—디터를 ìƒì„±í•©ë‹ˆë‹¤.
  • 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ë²„ì „ì´ ì œê±°ë˜ì—ˆìŠµë‹ˆë‹¤ ë”°ë¼ì„œ 디펜ë˜ì‹œ ëª¨ë“ˆë“¤ì„ ì§ì ‘ 로드해야합니다(샘플 참조)