1. Toast UI Editor란?
Toast UI Editor는 NHN에서 개발한 오픈소스 마크다운 에디터로, 웹에서 손쉽게 마크다운(Markdown) 문서를 작성할 수 있도록 도와줍니다. 실시간 미리보기 기능과 풍부한 플러그인 지원을 제공하여 블로그, 위키, 문서 관리 시스템 등에 널리 활용됩니다.
(1) 주요 특징
- 마크다운 지원: 마크다운 문법을 사용하여 간편하게 문서 작성 가능
- 실시간 미리보기: 입력한 마크다운을 즉시 HTML로 변환하여 확인 가능
- 플러그인 확장 기능: 코드 하이라이트, 테이블, 멀티미디어 삽입 등 다양한 기능 추가 가능
- 다양한 모드 지원: WYSIWYG(What You See Is What You Get) 모드와 마크다운 모드 제공
- 오픈소스: 누구나 무료로 사용 가능하며 커스터마이징 가능
2. Toast UI Editor 설치 방법
(1) CDN을 이용한 간편 설치
CDN을 활용하면 간단한 HTML 코드만으로 Toast UI Editor를 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Toast UI Editor 사용 예제</title>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
<div id="editor"></div>
<script>
const editor = new toastui.Editor({
el: document.querySelector('#editor'),
height: '400px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});
</script>
</body>
</html>(2) NPM을 이용한 설치
npm install @toast-ui/editor설치 후, JavaScript 코드에서 아래와 같이 에디터를 불러올 수 있습니다.
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';
const editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'wysiwyg',
previewStyle: 'tab'
});3. Toast UI Editor 기본 사용법
(1) 마크다운 작성 및 미리보기
Toast UI Editor는 기본적으로 마크다운을 지원하며, 실시간 미리보기가 가능합니다.
# 제목 1
## 제목 2
**굵은 글씨**와 *기울임 글씨*
- 리스트 1
- 리스트 2(2) 이미지 삽입
또는 JavaScript에서 직접 삽입 가능:
editor.insertText('');(3) 코드 블록 삽입
```javascript
console.log('Hello, World!');
## 4. Toast UI Editor 플러그인 활용
### (1) 코드 하이라이트 추가
```sh
npm install @toast-ui/editor-plugin-code-syntax-highlight사용법:
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import 'prismjs/themes/prism.css';
const editor = new Editor({
el: document.querySelector('#editor'),
plugins: [codeSyntaxHighlight]
});(2) 테이블 삽입 기능 추가
| 제목1 | 제목2 |
|------|------|
| 내용1 | 내용2 |5. Toast UI Editor 커스터마이징
사용자가 직접 스타일을 변경하거나 기능을 확장할 수 있습니다.
(1) 에디터 테마 변경
.toastui-editor-defaultUI {
background-color: #f5f5f5;
}(2) 사용자 지정 버튼 추가
const toolbarItem = editor.getUI().getToolbar().addButton({
name: 'customButton',
tooltip: '커스텀 버튼',
className: 'custom-button',
event: 'custom-event'
});
editor.on('custom-event', () => {
alert('커스텀 버튼 클릭!');
});
궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.
반응형
'Front End > React' 카테고리의 다른 글
| [React] 리액트 서스펜스(React Suspense) 사용 방법 (1) | 2024.11.26 |
|---|---|
| [React] is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. error (0) | 2022.12.19 |
| [React] React 에서 lottie 사용하기 (함수형) (0) | 2022.10.13 |
| [React] export default 와 export 차이점 (0) | 2022.10.07 |
| [React] 리액트에 구글애널리틱스(GA) 적용하기 (0) | 2022.09.28 |