[해피CGI][cgimall] Autumn Note - 위지윅 에디터

# 라이센스

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 게시판 글쓰기, 관리자 페이지 콘텐츠 입력, 매뉴얼·문서 작성 도구, 메일·뉴스레터 작성기, 댓글·리뷰 입력창 등.

참고 링크

• GitHub 원본: https://github.com/cmm-cmm/Autumn-Note
• 라이브 데모: cssscript.com 데모

# 설치방법

① 패키지 매니저 설치

npm install autumnnote # 또는 yarn add autumnnote # 또는 pnpm install autumnnote

import AutumnNote from 'autumnnote'; import 'autumnnote/dist/autumnnote.css';

② CDN 방식

③ 기본 사용

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)	이벤트 리스너 등록/해제

메서드 설명