툴바
프리셋 고르기, 버튼 순서 바꾸기, 내 버튼 넣기.
프리셋
| 이름 | 쓰임 |
|---|---|
'minimal' | 댓글창: 굵게·기울임·밑줄·링크·목록 |
'basic' | 간단한 글: 제목·서식·목록·링크·이미지 |
'board' | 기본값. 한 줄: 문단 · 크기 · 굵게 밑줄 취소선 · 글자색 배경색 · 정렬 · 목록 · 링크 사진 동영상 표 · 서식 지우기, 나머지는 ⋯ 더보기 |
'full' | 모든 기능: 특수문자·이모지·찾기·소스·접근성 검사·템플릿 등 |
직접 고르기
TinyMCE와 같은 문자열 형식을 씁니다. | 는 구분선입니다. 배열로 넘기면 각 배열이 한 묶음입니다.
createEditor('#editor', {
toolbar: 'undo redo | heading fontSize | bold italic underline color | alignMenu | bulletList orderedList | link image table | more | findReplace source',
});
// 같은 뜻의 배열
createEditor('#editor', {
toolbar: [['undo', 'redo'], ['heading', 'fontSize'], ['bold', 'italic', 'underline', 'color'], ['link', 'image', 'table']],
});쓸 수 있는 이름
| 묶음 | 이름 |
|---|---|
| 기록 | undo redo |
| 문단 | heading fontFamily fontSize lineHeight |
| 글자 | bold italic underline strike subscript superscript code color highlight clearFormat caseChange formatPainter |
| 정렬·목록 | alignMenu alignLeft alignCenter alignRight alignJustify bulletList orderedList checklist listStyle indent outdent |
| 넣기 | link image video table hr pageBreak blockquote codeBlock specialChars emoji template toc datetime |
| 도구 | findReplace source preview print fullscreen a11y help |
| 구분 | | 묶음 나누기, more 이후는 ⋯ 메뉴 |
내 버튼 넣기
editor.addButton('signature', {
icon: '<svg viewBox="0 0 20 20"><path d="M3 15c3-6 5-6 6-2s3 3 8-4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>',
title: '서명 넣기',
onAction: (ed) => ed.insertHTML('<p>고객센터 드림</p>'),
});
// 툴바 문자열에 'signature' 를 넣으면 그 자리에 나타납니다.