Toast UI Editor
2023. 3. 7. 10:04ㆍHTML,CSS
https://github.com/nhn/tui.editor/blob/master/docs/ko/getting-started.md
GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. - GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
github.com
Toast UI Editor는 패지키 매니저를 사용하거나(Node.js) CDN 방식으로 사용할 수 있다.
주로 Spring을 사용할 것이기 때문에 CDN 방식으로 해보자.
CDN 방식을 이용해 쉽고 간편하게 테스트하기 위해서 codepen을 이용했다.
- HTTP
<body>
<!- 에디터 소스 가져오기 -!>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<!- 데이터 ui 구현한 css 소스 -!>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<!- 에디터 생성 -!>
<div id="editor"></div>
</body>
- JS
const Editor = toastui.Editor;
// 옵션
const editor = new Editor({
el: document.querySelector('#editor'),
height: '600px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});- height: 에디터 영역의 높기 값. 문자열 값을 가진다. 300px | auto
- initialEditType: 최초로 보여줄 에디터 타입. markdown | wysiwyg
- initialValue: 콘텐츠 초기값. 반드시 마크다운 문자열 형태여야 한다.
- previewStyle: 마크다운 프리뷰 스타일. tab | vertical
- usageStatistics: 에디터를 사용하는 웹 사이트의 _호스트명_을 전송한다. 어떠한 사용자가 에디터를 사용하고 있는지 수집하기 위합니다. 이 옵션은 불리언 값을 지정하여 비활성화할 수 있다. true | false
https://codepen.io/jooooonj/pen/GRXvGYa
'HTML,CSS' 카테고리의 다른 글
| [HTML] 기본 Form 구조 (0) | 2023.03.16 |
|---|---|
| HTML, CSS 작업을 도와줄 사이트 (0) | 2023.03.16 |
| [CSS] Flex와 Tailwind (0) | 2023.03.14 |
| HTML/CSS 기본 (0) | 2023.02.21 |