# 라이센스
MIT License (상업적 이용 가능, 자유로운 수정·배포 가능)
# 특징 및 설명
텍스트 편집
- 굵게, 기울임, 밑줄, 취소선, 위첨자, 아래첨자
- 6단계 제목, 인용구, 코드블록 단락 스타일
- 10종 내장 글꼴(커스텀 글꼴 추가 가능), 줄간격 조절
- 글자색·형광펜 컬러 픽커, 좌/중/우/양쪽 정렬
- 순서/비순서/체크리스트 목록, 들여쓰기/내어쓰기
- Undo/Redo 히스토리 (단축키 지원)
미디어 삽입
- 이미지: URL/파일 업로드, base64 임베드 또는 서버 업로드 지원
- 인라인 이미지 자르기 도구 내장
- 동영상: YouTube, Vimeo, MP4/WebM/OGG 직접 URL을 반응형 아이프레임·video 태그로 렌더링
- 표: 그리드 픽커로 직관적 삽입
- 이모지 픽커: 7개 카테고리 380종 + 키워드 검색
- FontAwesome 아이콘 픽커: 스타일·크기·색상 설정 가능
편의 기능
- 찾기·바꾸기 다이얼로그 (Ctrl+F / Ctrl+H)
- 우클릭 컨텍스트 메뉴
- 스크롤 시 상단 고정되는 sticky 툴바
- 라이트/다크 테마
- 상태바: 실시간 단어/글자 수 표시 + 드래그로 높이 조절
- HTML 소스 보기 모드
- localStorage 자동 저장 (auto-save)
- 읽기 전용 모드
- 8개 언어 로케일 내장 (한국어 'ko' 포함)
- RTL(우→좌) 레이아웃 지원
- 키보드 단축키 다이얼로그 (Shift+?)
개발자 친화 기능
- 다중 인스턴스 지원 (페이지당 여러 에디터, 각각 독립 상태)
- Bootstrap 4/5 클래스 자동 적용 옵션
- Prism.js 자동 연동 코드 하이라이트
- 붙여넣기 살균 및 Markdown 단축 입력 변환
- 풍부한 이벤트 시스템 (change, paste, selectionChange, charLimitReached 등)
키보드 단축키
| 단축키 |
동작 |
Ctrl + Z |
실행 취소(Undo) |
Ctrl + Shift + Z / Ctrl + Y |
다시 실행(Redo) |
Ctrl + B |
굵게 |
Ctrl + I |
기울임 |
Ctrl + U |
밑줄 |
Ctrl + F |
찾기 다이얼로그 열기 |
Ctrl + H |
찾기·바꾸기 다이얼로그 열기 |
Shift + Enter |
줄바꿈 삽입 |
Tab |
공백 삽입 / 목록 들여쓰기 |
Shift + Tab |
목록 내어쓰기 |
Shift + ? |
단축키 도움말 다이얼로그 |
추천 활용처
CMS 게시판 글쓰기, 관리자 페이지 콘텐츠 입력, 매뉴얼·문서 작성 도구, 메일·뉴스레터 작성기, 댓글·리뷰 입력창 등.
참고 링크
# 설치방법
① 패키지 매니저 설치
npm install autumnnote # 또는 yarn add autumnnote # 또는 pnpm install autumnnote
import AutumnNote from 'autumnnote'; import 'autumnnote/dist/autumnnote.css';
② CDN 방식
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/autumnnote/dist/autumnnote.css"> <script src="https://cdn.jsdelivr.net/npm/autumnnote"></script>
③ 기본 사용
const editor = AutumnNote.create('#article-editor', { // 옵션 설정 });
④ 서버 업로드 처리 예시
const editor = AutumnNote.create('#article-editor', { onImageUpload(files) { const payload = new FormData(); payload.append('image', files[0]); fetch('/media/images/upload', { method: 'POST', body: payload }) .then(res => res.json()) .then(({ url }) => editor.insertImage(url, files[0].name)); }, });
※ FontAwesome이 페이지에 로드되어 있으면 자동 감지되어 FA 아이콘을 사용하고, 없으면 내장 SVG 아이콘으로 대체됩니다.
중요 옵션
| 옵션명 |
설명 |
기본값 |
placeholder |
빈 에디터에 표시할 안내 문구 |
- |
height |
초기 높이(px) |
200 |
minHeight / maxHeight |
최소/최대 높이(px), 0은 무제한 |
100 / 0 |
toolbar |
툴바 버튼 그룹 배열로 커스터마이징 |
전체 버튼 |
toolbarOverflow |
툴바 넘침 처리 ('wrap' 또는 'scroll') |
wrap |
theme |
테마 ('light' 또는 'dark') |
light |
lang |
UI 언어 ('ko', 'en', 'ja', 'zh', 'vi', 'fr', 'de', 'es') |
en |
direction |
텍스트 방향 ('ltr' 또는 'rtl') |
ltr |
autoSave / autoSaveKey |
localStorage 자동 저장 활성화 및 키 지정 |
false |
readOnly |
읽기 전용 모드 |
false |
allowImageUpload |
이미지 드래그/붙여넣기/업로드 허용 |
true |
maxImageSize |
최대 이미지 크기(MB) |
5 |
maxChars / maxWords |
최대 글자/단어 수 제한, 0은 무제한 |
0 |
pasteAsPlainText |
붙여넣기 시 서식 제거 |
false |
pasteCleanHTML |
붙여넣기 시 HTML 살균 |
true |
markdownPaste |
Markdown 단축 입력을 HTML로 변환 |
true |
stickyToolbar / stickyToolbarOffset |
스크롤 시 툴바 상단 고정 및 오프셋(px) |
false |
useBootstrap / bootstrapVersion |
Bootstrap CSS 클래스 적용 (4 또는 5) |
false / 5 |
codeHighlight |
Prism.js 자동 로드로 코드 블록 하이라이트 |
true |
colorSwatches |
색상 팔레트 앞에 추가할 브랜드 컬러 배열 |
[ ] |
onChange / onFocus / onBlur / onInit |
콘텐츠 변경 / 포커스 / 블러 / 초기화 콜백 |
- |
onImageUpload / onImageError |
커스텀 업로드 핸들러 / 이미지 거부 콜백 |
- |
주요 API 메서드
| 메서드 |
설명 |
editor.getHTML() |
살균된 HTML 반환 (폼 제출용) |
editor.setHTML(html) |
콘텐츠 설정 |
editor.getText() |
평문 텍스트 반환 |
editor.clear() |
콘텐츠 비우기 |
editor.destroy() |
에디터 제거 및 원래 DOM 복원 |
editor.setDisabled(bool) |
에디터·툴바 활성/비활성 전환 |
editor.on(event, handler) / editor.off(event, handler) |
이벤트 리스너 등록/해제 |
|
