TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor)
cdns에 2.0.0 버전 지원이 끊겼고, 사용법도 조금 달라져 2021년 7월 23일에 최신 버전 기준으로 글을 업데이트 했습니다!
TOAST UI :: Make Your Web Delicious! | TOAST UI :: Make Your Web Delicious!
Calendar provides monthly, weekly, multi-weekly, daily views, and more, as well as a basic pop-up UI you can use to add/edit/delete your schedules. You can manage your schedule simply by dragging the schedules around. Managing your calendar has never been
ui.toast.com
Toast UI는 과거 한게임과 네이버가 합작해서 탄생했던 회사인 NHN 에서 만든 MIT 라이센스 기반의
Markdown WYSIWYG Editor 입니다.
Github를 필두로 널리 쓰이고 있는 Markdown 형식의 작성을 보다 쉽게 할 수 있도록 도와줍니다.
홈페이지 혹은 Github Repository에 친절하게 사용방법이 안내되어 있지만 간단하게 샘플 코드 작성하는 것을 함께 해보겠습니다.
preScript 란에 css를 등록합니다.
<!-- Toast UI Editor -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
postScript엔 js 파일을 등록합니다.
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
html은 아래 내용으로 충분합니다.
<div id="editor"></div>
script를 등록해줍니다.
const Editor = toastui.Editor;
const editor = new Editor({
el: document.querySelector('#editor'),
height: '600px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});
실행해 보면 아래와 같이 나옵니다.
html 보기와 markdown 보기 버튼을 달아서 각각 데이터가 어떻게 넘어가는지도 확인 하도록 해 두었습니다.
editor.getHTML()로 작성 내용을 html 로 렌더링 할 수 있습니다.
HTML 태그로 잘 변환해 준 것을 확인 할 수 있습니다.
editor.getMarkdown()으로 Markdown 형식으로 작성한 그대로의 내용도 받아올 수 있습니다.
뷰어로만 사용하려면 아래 코드처럼 작성하면 됩니다.
<div id="viewer"></div>
const viewer = Editor.factory({
el: document.querySelector('#viewer'),
viewer: true,
height: '500px',
initialValue: '# hello \n> world'
});
마지막으로 따라하기 쉽게 전체 샘플 코드 올려드리겠습니다.
<!DOCTYPE html>
<head>
<!-- Toast UI Editor -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
<h1>Hello ToastUI</h1>
<div id="editor"></div>
<button onclick="seeHtml()">html보기</button>
<button onclick="seeMd()">markdown보기</button>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script>
const Editor = toastui.Editor;
const editor = new Editor({
el: document.querySelector('#editor'),
height: '600px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});
seeHtml = function(){
alert(editor.getHTML());
}
seeMd = function(){
alert(editor.getMarkdown());
}
</script>
</body>
html 파일로 만드셔서 테스트 해보시면 바로 작동 합니다 ! 이상입니다.
'Programming > javascrlpt' 카테고리의 다른 글
| jQuery contextMenu를 활용해 우클릭 메뉴 만들기 (0) | 2021.06.05 |
|---|---|
| 이제 alert 대신 toastr 사용하자 ! Toastr 사용 하기 (3) | 2021.06.04 |
| JavaScript 드래그 할 수 있는 HTML 요소 만들기 (0) | 2021.05.23 |
| Quick template for Jquery Ajax calls (0) | 2021.05.15 |
| javascript 카카오 아이디로 로그인하기 구현 (0) | 2021.03.26 |