markdown editor를 한번 써보고 싶기에 검색을 해 보니 ToastUI가 유명하더군요.
그래서 ToastUI를 한번 사용해 보기로 했습니다.
toast 공식 훔
https://ui.toast.com/
editor 사용법
https://github.com/nhn/toast-ui.doc
link로 소스 불러오기.
<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">
editor div태그에 editor 불러오기
<div id="editor" style="box-sizing: border-box; height: 500px;"></div>
기본적으로 editor에서 제공해 주지만 버튼 클릭 후 비교하고 싶다면 button과 viewer div태그를 추가하면 됩니다.
<button onclick="ToView();">아래에 표시하기</button>
<div id="viewer"></div>
script 추가하기
<script src="https://uicdn.toast.com/editor/2.0.0/toastui-editor-all.min.js"></script>
<scirpt>
const content = [].join('\n');
const editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'vertical',
initialEditType: "wysiwyg",
height: '500px',
initialValue: content
});
// 하단부에 버튼 클릭시 적용된 글 보기
const viewer = toastui.Editor.factory({
el: document.querySelector('#viewer'),
viewer: true,
height: '500px',
initialValue: content
});
function ToView()
{
viewer.setMarkdown(editor.getMarkdown());
};
</script>
전체 코드의 경우 이렇게 나옵니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toast UI test</title>
</head>
<!-- Editor's Dependecy Style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"/>
<!-- Editor's Style -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<body>
<div id="editor" style="box-sizing: border-box; height: 500px;"></div>
<!-- onchange 말고 굳이 버튼 이후코드 반영된 코드 보여주고 싶다면 -->
<button onclick="ToView();">test editor</button>
<div id="viewer"></div>
<script src="https://uicdn.toast.com/editor/2.0.0/toastui-editor-all.min.js"></script>
<script>
const content = [].join('\n');
const editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'vertical',
initialEditType: "wysiwyg",
height: '500px',
initialValue: content
});
const viewer = toastui.Editor.factory({
el: document.querySelector('#viewer'),
viewer: true,
height: '500px',
initialValue: content
});
function ToView()
{
viewer.setMarkdown(editor.getMarkdown());
};
</script>
</body>
</html>
이렇게 잘 출력되는 것을 알 수 있습니다.
Uploaded by Notion2Tistory v1.1.0