CKEditor4 도구 모음 구성, 내 손으로 직접 꾸미기

 

 

 

 

 

웹 개발자나 콘텐츠 관리자라면 한 번쯤 사용해 봤을 WYSIWYG 에디터, CKEditor4에서 사용자 인터페이스의 핵심인 '도구모음(Tollbar)'에 대해서 알아보겠습니다. 기본 도구 모음도 훌륭하지만, 운영 중인 웹 사이트나 서비스의 특성에 맞춰 꼭 필요한 기능만 넣거나, 자주 쓰는 기능을 눈에 띄게 배치하면 사용자 경험(UX)이 훨씬 좋아질 것입니다.

 

 

 

 

 

왜 도구 모음을 사용자 정의해야 할까요?

 

향상된 사용자 경험(UX)

불필요한 버튼을 제거하고, 자주 사용하는 기능을 전면에 배치하여 사용자가 더 빠르고 효율적으로 작업할 수 있습니다. 그렇게 된다면 불필요한 클릭과 찾고자 하는 버튼의 서치 범위를 줄여 사용자에게 효율적인 사용자 경험을 제공할 수 있습니다.

 

 

간결한 인터페이스

너무 많은 버튼은 사용자를 혼란스럽게 할 수 있습니다. 꼭 필요한 기능만 남겨두면 에디터가 훨씬 깔끔하고 직관적으로 보입니다. 

 

 

특정 서비스에 최적화

게시판 에디터라면 이미지 업로드나 표 삽입 기능이 중요하고, 단순 댓글 에디터라면 기본적인 텍스트 스타일링만 필요할 수 있습니다. 서비스의 목적에 맞춰 도구 모음을 구성할 수 있습니다.

 

 

성능 향상(선택)

불필요한 플러그인을 제거하면 CKEditor의 로딩 속도도 약간 개선될 수 있습니다.

 

 

CKEditor4는 모든 기능을 갖춘 WYSIWYG 편집기이지만, 모든 옵션이 필요한 것은 아닙니다. 따라서 툴바 사용자 정의는 가장 일반적인 요구 사항 중 하나입니다.

편집기를 필요에 맞게 조정하는 가장 권장되는 방법은 사용자 지정 빌드를 만들고, 툴바에 추가되기 전에 원치 않는 기능을 제거하는 것입니다. 전체 패키지를 다운로드 한 구성에서 플러그인이나 버튼을 제거하는 것은 좋지 않습니다. 정당한 이유 없이 불필요한 기능만 로드하게 될 것입니다.

 

 

 

 

---

툴바 구성기를 이용한 방법

 

 

[ 툴바 구성기 사용하기 ]

Toolbar Configurator

 

툴바 구성기는 CKEditor 4.5에서 도입되었으며 모든 공식 CKEditor4 설치 패키지에서 사용할 수 있습니다.

 

CKEditor4 배포 패키지에 포함된 새로운 툴바 유틸리티를 사용하면 접근성 있는 툴바를 쉽게 구성할 수 있습니다. 편집기 툴바를 설정하는 '가장 권장되는 방법'입니다. 툴바 그룹 순서를 변경하고, 버튼을 선택 및 선택 해제하고, 툴바를 행으로 나누는 데 사용할 수 있습니다. 현재 구성은 첨부된 편집기 인스턴스에서 실시간으로 미리 볼 수 있으므로 툴바의 모양과 느낌에 대한 즉각적인 피드백을 받을 수 있습니다. 설정에 만족하면 생성된 소스 코드를 복사하여 편집기 구성에 붙여 넣기만 하면 됩니다.

툴바 구성기에는 두 가지 유형이 있습니다. 시작적인 구성으로 확인 할 수 있는 '기본 도구 모음 구성기'와 항목별 구성을 통해 완전히 사용자 정의된 도구 모음을 만들 수 있는 '고급 도구 모음 구성기'입니다. 툴바 구성기에 표사되는 편집기에는 특정 CKEditor4 빌드에서 사용 가능한 모든 기능과 버튼이 포함되어 있습니다.

 

 

 

 

 

기본 도구 모음 구성기

 

 

기본 툴바 구성기는 편집기 툴바를 정렬하는 데 권장되는 방식인 '툴바 그룹' 방식을 사용합니다. 위쪽 및 아래쪽 화살표를 클릭하여 툴바 그룹의 순서를 수정하고, 확인란을 선택하거나 선택 취소하여 버튼 표시 여부를 변경할 수 있습니다. '행 구분 기호 추가' 버튼을 사용하여 새 툴바 행을 만듭니다.

 

툴바 설정이 마음에 들면 '툴바 설정 가져오기' 버튼을 클릭하여 생성된 툴바 설정을 확인할 수 있습니다. 새 툴바 코드를 편집기 설정에 추가합니다. 다른 설정 옵션을 이미 변경했다면 두 설정을 병합하는 것을 잊지 말고 설정을 변경한 후에는 반드시 브라우저 캐시를 삭제합니다.

 

 

 

 

 

고급 도구 모음 구성기

 

 

CKEditor4 인스턴스와 현재 툴바 구성을 사용하는 코드 편집기로 시작합니다. 코드 편집기에서 툴바 코드를 직접 편집할 수 있으며, 입력하는 동안 툴바 미리보기가 실시간으로 업데이트됩니다. 편집기 구성에서 사용하지 않는 툴바 항목은 오른쪽에 나열되어 있으므로 필요할 때 쉽게 다시 추가할 수 있습니다.

 

툴바 설정이 마음에 들면 코드 편집기에서 수정된 툴바 구성을 복사합니다. 새 툴바 코드를 편집기 설정에 추가하고 다른 설정 옵션을 이미 변경했다면 두 설정을 병합하는 것을 잊지 않습니다. 그리고 설정을 변경한 후에는 기본 도구 모음 설정과 마찬가지로 브라우저 캐시를 꼭 삭제합니다.

 

🎯 도구 모음 구성의 핵심, config.js 파일
CKEditor4의 도구 모음 구성은 주로 config.js 파일에서 이루어집니다.  해당 파일은 CKEditor 설치 폴더 안에 있으며, 에디터의 전반적인 동작을 설정하는 중요한 파일입니다.

CKEDITOR.editorConfig = function( config ) {
    // 여기에 툴바 설정을 추가합니다.
};​

 

 

 

 

 

1.  Toolbar Configurator로 들어가 원하는 툴바의 형태를 구성합니다. 구성 후, 오른쪽 상단에 있는 'Get Toolbar config' 버튼을 클릭합니다.

 

 

 

 

 

 

2.  표시된 소스를 전체 선택 후, 복사합니다.

 

 

 

 

 

 

3.  CKEditor 폴더 내, config.js 파일을 열고 복사했던 내용을 붙여넣습니다.

 

 

서버를 실행 후, 설정된 툴바 형태를 브라우저를 통해 확인합니다.

 

 

 

 

 

---

ToolbarGroups vs Toolbar를 이용하는 방법

 

CKEditor 4에서 툴바를 설정하는 방식은 크게 toolbarGroups와 toolbar 두 가지가 있습니다. 이 두 가지 설정 방식은 툴바의 구성과 버튼의 배치에 유연성을 제공하지만, 각각의 특징과 사용 목적이 다릅니다.

 

CKEditor 4는 강력한 WYSIWYG 편집기로, 사용자가 풍부한 텍스트 편집 기능을 활용할 수 있도록 다양한 툴바 설정을 지원합니다. 툴바는 편집기의 핵심적인 사용자 인터페이스 요소로, 사용자가 자주 사용하는 기능들에 빠르게 접근할 수 있도록 도와줍니다. CKEditor 4에서 툴바를 구성하는 주요 방식은 toolbarGroups와 toolbar 두 가지이며, 각각의 장단점과 사용법을 이해하는 것이 중요합니다.

 

 

 

 

 

ToolbarGroups란?

 

toolbarGroups는 툴바의 버튼들을 논리적인 그룹으로 묶어 관리하는 방식입니다. CKEditor4는 내부적으로 기능별로 버튼들을 미리 그룹화해 놓았으며, toobarGroups 설정을 통해 어떤 그룹들을 툴바에 포함할지, 그리고 어떤 순서로 배치할지를 정의할 수 있습니다. 해당 방식은 특정 기능 그룹을 통째로 추가하거나 제외할 때 매우 유용하며, 툴바의 전반적인 구성을 빠르게 변경하고자 할 때 적합합니다. 

 

설정방법

toolbarGroups는 config.js 파일 또는 CKEDITOR.replace(), CKEDITOR.inline() 호출 시 설정 객체 내에서 지정할 수 있습니다. 각 그룹은 객체 형태로 정의되며, name 속성으로 그룹의 이름을 지정하고 groups 속성으로 해당 그룹에 포함될 하위 그룹 또는 개별 버튼을 정의할 수 있습니다. 

 

// config.js 또는 CKEDITOR.replace() 옵션
CKEDITOR.editorConfig = function( config ) {
    config.toolbarGroups = [
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'others' },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];
};

 

위 예시는 기본적인 툴바 그룹 구성을 보여줍니다. 각 그룹 객체는 name 속성을 필수로 가지며, groups 속성을 통해 해당 그룹 내의 세부 그룹 또는 버튼들을 정의할 수 있습니다. groups 속성을 생략하면, 해당 name을 가진 기본 그룹의 모든 버튼이 포함됩니다.

 

config.toolbarGroups는 도구 모음을 구성하는 "그룹"의 순서를 정의합니다. 각 그룹은 특정 기능 범주에 속하는 버튼들을 묶어놓은 논리적인 단위입니다.

• document : 문서 관련 작업 (예: 소스 보기, 미리 보기, 저장, 새 문서 등)
  - 하위 그룹 : mode, document, doctools
• clipboard :  클립보드 작업 및 되돌리기 / 다시 실행
  - 하위 그룹 : clipboard, undo
• editing : 찾기, 바꾸기, 선택, 맞춤법 검사 등 편집 관련 기능
  - 하위 그룹 : find, selection, spellchecker
• forms : HTML 폼 요소 삽입 (예: 텍스트 필드, 체크박스, 라디오 버튼 등)
• basicstyles : 기본적인 텍스트 스타일 (예: 굵게, 기울임, 밑줄, 취소선 등)
  - 하위 그룹 : basicstyles, cleanup (포맷 제거)
• paragraph : 단락 서식 (예: 목록, 들여 쓰기 / 내어 쓰기, 인용, 정렬, 텍스트 방향 등)
  - 하위 그룹 : list, indent, blocks, align, bidi
• links : 하이퍼링크 관련 기능 (예: 링크 삽입 / 제거, 앵커)
• insert : 다양한 객체 삽입 (예: 이미지, 표, 가로줄, 특수 문자, 이모티콘, 페이지 나누기, iframe 등)
• styles : 스타일 적용 (예: 단락 스타일, 글꼴, 글꼴 크기)
• colors : 텍스트 색상 및 배경색
• tools : 유용한 도구 (예: 최대화, 블록 표시 등)
• others : 기타 기능
• about : CKEditor 정보

 

참고

• ' / ' : 이 기호를 toolbarGroups 배열 안에 넣으면 해당 위치에서 도구 모음이 새로운 줄로 나뉩니다.
• 위 그룹들은 CKEditor의 'Full' 빌드에 일반적으로 포함된 그룹들입니다. 사용 중인 CKEditor 빌드나 설치된 플러그인에 따라 목록이 달라질 수 있습니다.

 

 

 

 

 

Toolbar란?

 

toolbar는 툴바에 표시될 개별 버튼들을 직접 나열하여 구성하는 방식입니다. 이 방식은 toolbarGroups보다 더 세밀한 제어를 가능하게 하며, 툴바의 각 버튼을 원하는 순서와 위치에 정확히 배치할 수 있습니다. 특정 버튼만 추가하거나 제외하고 싶을 때, 또는 툴바의 레이아웃을 완전히 커스터마이징하고 싶을 때 유용합니다.

 

설정방법

toolbar도 마찬가지로 config.js 파일 또는 CKEDITOR.replace(), CKEDITOR.inline() 호출 시 설정 객체 내에서 지정할 수 있습니다.

 

// config.js 또는 CKEDITOR.replace() 옵션
CKEDITOR.editorConfig = function( config ) {
    config.toolbar = [
        { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
        { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
        '/', // 다음 줄로 이동
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
        '/', // 다음 줄로 이동
        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
        { name: 'others', items: [ 'About' ] }
    ];
};

 

위 예시는 toolbar 속성을 사용하여 툴바에 포함될 개별 버튼들을 명시적으로 나열한 것입니다. 각 객체는 name 속성으로 그룹의 이름을 지정하고, items 속성으로 해당 그룹에 속할 버튼들의 배열을 정의합니다. '/'를 사용하여 툴바의 줄 바꿈을 적용할 수 있으며, '-'를 사용하여 그룹 내에서 구분선을 추가할 수 있습니다.

 

config.toolbar는 각 그룹 내에 표시될 버튼의 순서와 종류를 명시적으로 지정할 때 사용합니다. 각 버튼은 해당 기능을 수행하는 플러그인에 의해 제공됩니다.

 

 

Document 그룹 관련

• Source : HTML 소스 코드 보기 / 편집
• Save : 저장 (별도 플러그인 필요)
• NewPage : 새 문서
• Preview : 미리 보기
• Print : 인쇄
• Templates : 템플릿 삽입

 

Clipboard / Undo 그룹 관련

• Cut : 잘라내기
• Copy : 복사
• Paste : 붙여 넣기
• PasteText : 텍스트로 붙여 넣기
• PasteFromWord : Word에서 붙여 넣기
• Undo : 되돌리기
• Redo : 다시 실행

 

Editing 그룹 관련

• Find : 찾기
• Replace : 바꾸기
• SelectAll : 모두 선택
• Scayt : 실시간 맞춤법 검사 (Spell Check As You Type)

 

Forms 그룹 관련

• Form : 폼 태그 삽입
• Checkbox : 체크 박스
• Radio : 라디오 버튼
• TextField : 텍스트 필드
• Textarea : 텍스트 영역
• Select : 드롭다운 목록
• Button : 버튼
• ImageButton : 이미지 버튼
• HiddenField : 숨겨진 필드

 

Basic Styles 그룹 관련

• Bold: 굵게
• Italic: 기울임 꼴
• Underline: 밑줄
• Strike: 취소선
• Subscript: 아래 첨자
• Superscript: 위 첨자
• RemoveFormat: 서식 제거

 

Paragraph 그룹 관련

• NumberedList: 번호 매기기 목록
• BulletedList: 글머리 기호 목록
• Outdent: 내어 쓰기
• Indent: 들여 쓰기
• Blockquote: 인용 블록
• CreateDiv: Div 컨테이너 생성
• JustifyLeft: 왼쪽 정렬
• JustifyCenter: 가운데 정렬
• JustifyRight: 오른쪽 정렬
• JustifyBlock: 양쪽 정렬
• BidiLtr: 텍스트 방향 왼쪽에서 오른쪽
• BidiRtl: 텍스트 방향 오른쪽에서 왼쪽
• Language: 언어 설정 (다국어 지원 플러그인 필요)

 

Links 그룹 관련

• Link: 링크 삽입/수정
• Unlink: 링크 제거
• Anchor: 앵커 삽입/수정

 

Insert 그룹 관련

• Image: 이미지 삽입
• Flash: Flash 삽입
• Table: 표 삽입
• HorizontalRule: 가로줄 삽입
• Smiley: 이모티콘 삽입
• SpecialChar: 특수 문자 삽입
• PageBreak: 인쇄용 페이지 나누기
• Iframe: IFrame 삽입
• CodeSnippet: 코드 스니펫 삽입 (Code Snippet 플러그인 필요)
• Mathjax: 수학 공식 삽입 (MathJax 플러그인 필요)
• CreatePlaceholder: 플레이스홀더 삽입 (Placeholder 플러그인 필요)

 

Styles 그룹 관련

• Styles: CSS 스타일 적용 (드롭다운)
• Format: 단락 포맷 (예: Normal, Heading 1, Heading 2 등)
• Font: 글꼴 선택 (드롭다운)
• FontSize: 글꼴 크기 선택 (드롭다운)

 

Colors 그룹 관련

• TextColor: 텍스트 색상
• BGColor: 배경 색상

 

Tools 그룹 관련

• Maximize: 편집기 최대화/복원
• ShowBlocks: HTML 블록 요소 표시/숨기기
• About: CKEditor 정보

 

추가적인 기호

• -: 같은 그룹 내에서 버튼들 사이에 구분선을 추가합니다.
• '/': toolbar 배열 내에서 새로운 줄로 도구 모음을 나눕니다.

 

 

 

 

 

---

자주 사용되는 도구 모음 버튼 목록

 

• 텍스트 서식 :
  - Bold, Italic, Underline, Strike, RemoveFormat, Styles, Format, Font, FontSize, TextColor, BGColor
• 단락 / 정렬 :
  - NumberedList, BulletedList, Outdent, Indent, Blockquote, JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock
• 링크 / 삽입 : 
  - Link, Unlink, Image, Table, HorizontalRule, Smiley, SpecialChar, Iframe
• 기타 : 
  - Source, Maximize, Undo, Redo, Copy, Paste, PasteText, PasteFromWord

⚠️ 중요
여기에 없는 버튼을 추가하고 싶거나, 특정 버튼이 작동하지 않는다면, 해당 버튼이 포함된 플러그인이 CKEditor 빌드에 포함되어 있는지 확인해야 합니다. (예:CodeSnippet 버튼을 사용하려면 codesnippet 플러그인이 있어야 함)

 

 

 

 

 

---

특정 에디터 인스턴스에만 다른 툴바 적용하기

 

CKEditor4 설정 파일인 config.js 는 전역 설정이지만, 만약 특정 <textarea>에만 다른 도구 모음을 적용하고 싶다면, CKEDITOR.replace() 또는 CKEDITOR.inline() 호출 시 설정 객체를 전달할 수 있습니다.

 

// HTML 코드
// <textarea id="editor1"></textarea>
// <textarea id="editor2"></textarea>

// JavaScript 코드
CKEDITOR.replace('editor1', {
    toolbar: [
        { name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
        { name: 'links', items: [ 'Link' ] }
    ]
});

CKEDITOR.replace('editor2', {
    toolbar: [
        { name: 'document', items: [ 'Source' ] },
        { name: 'insert', items: [ 'Image', 'Table' ] }
    ]
});

 

editor1은 간단한 툴바를 가지고, editor2는 다른 툴바를 가지게 됩니다.

 

 

 

 

 

@Junesker

---