2020. 4. 24. 15:30

NHN에서 옛날에 스마트 에디터라는 것을 공개한 적이 있는데....

너무 옛날 꺼라 그냥 쓰기 안 좋아 쓴 적이 없습니다.


그런데 어느 날 보니 완전 다른 에디터를 공개했군요.

심지어 마크다운과 위지웍을 동시에 지원!!





1. 간단하게 사용하기

도큐먼트가 애매하게 친절해서 빌드 없이 쓰는게 힘들게 돼있어서 따로 정리합니다.


1-1. 참조 추가하기 - CSS

"codemirror"에 CSS의존성이 있으므로 추가해야 합니다.


1
2
3
<!-- Toast Editor 2.0.0과 의존성 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/editor/2.0.0/toastui-editor.min.css" />
cs



1-2. 참조 추가하기 - Javascript

기능에 따라 필요한 것만 로드하면 되지만......

귀찮으니 그냥 All버전 하나만 로드하면 됩니다.


1
2
<!-- Toast Editor 2.0.0 -->
<script src="https://uicdn.toast.com/editor/2.0.0/toastui-editor-all.min.js"></script>
cs



1-3. 사용하기
div로 영역을 지정하고 에디터를 생성해주면 화면에 짠 하고 나타납니다.

(참고 : 설치와 기본기능 사용 )


1
2
3
4
5
6
const editor = new toastui.Editor({
    el: document.querySelector('#editor'),
    previewStyle: 'vertical',
    height: '500px',
    initialValue: content
});
cs





2. 기능 사용하기

웹 텍스트 에디터를 사용하려면 

에디터의 내용을 가지고 오는 기능과

에디터에 데이터를 넣어주는 기능은 사용해야 합니다.

(참고 : Toast UI Editor pepo - Class)


1
2
3
4
5
6
7
//데이터 불러오기
//예> editor.getMarkdown()
[object].getMarkdown();
 
//데이터 불러오기
//예> viewer.setMarkdown()
[object].setMarkdown();
cs



마크다운 가져오기 : getMarkdown()

Html 가져오기 : getHtml()

마크다운 넣기 : setMarkdown()

Html 넣기 : setHtml()



3. 뷰어 기능 사용하기
토스트 UI 에디터는 뷰어가 따로 제공되긴 하는데....

에디터에도 뷰어 기능이 들어 있습니다.


개체를 생성할 때 'toastui.Editor.factory'로 생성하고

'viewer'옵션을 'true'로 줍니다.


1
2
3
4
5
6
const viewer = toastui.Editor.factory({
    el: document.querySelector('#viewer'),
    viewer: true,
    height: '500px',
    initialValue: content
});
cs



실행해보면 뷰어도 잘 동작합니다.




마무리

테스트용 페이지 : dang-gun.github.io/ToastEditor2_Test/1_EditorOrViewer.html(새창)


도큐먼트가.....뭔가 나사가 빠져있습니다 ㅋㅋㅋㅋ

잘돼있는거 같으면서도 정작 필요한 거 찾으려면 구글에서 검색해서 들어가야 합니다.

한글 메뉴얼 없는 건 둘째치고 말이죠.


그래도 기능이 좋아서 다 커버됩니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

댓글 작성

이름
패스워드
홈페이지
비밀글