CKEditor
CkEditor는 D8에서 코어모듈이 되었다. D7에서는 3rd party이므로 libraries로 설치하는 것을 권장했으나 D8에서는 TextEditor 모듈에 의해 동작하는 코어모듈이다.
위치: core/assets/vendor/ckeditor
ckeditor.com에서 다운받은 것과 달리 드루팔에서는 config.js와 samples, skin 기능등을 사용할 수 없다(site/core/assets/vendor/ckeditor/build-config.js의 주석 참조).
주의)ckeditor.com 에서 다운받아 드루팔에 덮어쓰기를 하면 ckeditor가 제대로 동작하지 않는다.
CKEditor 버전확인
core/assets/vendor/ckeditor/CHANGES.md 파일에서 버전을 확인할 수 있다.
필요한 addon을 설치할 때 반드시 버전을 알아야 한다.
CKEditor 플러그인들
ckeditor에 관한 모든 것. 여기 꼭 참고하자.
https://www.drupalaid.com/blog/enhancing-ckeditor-in-drupal-8
https://drupal.gatech.edu/handbook/drupal-8-ck-editor-enhancements
레이아웃(다단편집 등) 사용하기
CKEditor Widgets : https://www.drupal.org/project/ckeditor_widgets
모듈 설치하기
drush en ckeditor_widgets -y
설정하기
Text formats and editors (/admin/config/content/formats) 에서 적용하고자 하는 양식의 수정하기로 들어간다.
사용할 수 있는 버튼 목록에 빨간색 부분이 추가된 것을 볼 수 있다.
위 빨간색 버튼들을 Active Toolbar에 드래그앤드랍으로 옮긴다. (여기서는 Widgets이라는 그룹을 만들고 그 안쪽으로 옮겼다.)
글 작성화면에서 톱니바퀴를 클릭하면 위젯 기능을 쓸 수 있다. 하지만 안타깝께도 드루팔 8에서는 화면에 나와있는 것들만 쓸 수 있다.
https://ckeditor.com/addon/widget 애드온을 설치해도 마찬가지이다.
드래그&드랍으로 이미지 첨부하기
https://www.drupal.org/project/ckeditor_uploadimage
위 프로젝트 페이지에 나온 기능은 대부분 드루팔 8.3.5에서 이미 기본 기능이다. 기본 외에 사용할 수 있는 다음과 같다.
- 이미지를 드래그앤드랍으로 에디터에 첨부할 수 있다.
- 클립보드에 있는 이미지를 첨부할 수 있다 (-> 요기능은 안됐다.)
Inline responsive images 모듈과 통합할 수 있다.
IMCE 모듈과 연동할 수 있다.
필요한 ckeditor addon 설치(addon 목록은 프로젝트 페이지에서 확인할 것)
cd libraries
mkdir ckeditor
mkdir ckeditor/plugins
cd ckeditor/plugins
wget https://download.ckeditor.com/uploadimage/releases/uploadimage_4.6.2.zip
wget https://download.ckeditor.com/uploadwidget/releases/uploadwidget_4.6.2.zip
wget https://download.ckeditor.com/filetools/releases/filetools_4.6.2.zip
wget https://download.ckeditor.com/notification/releases/notification_4.6.2.zip
wget https://download.ckeditor.com/notificationaggregator/releases/notificationaggregator_4.6.2.zip
unzip uploadimage_4.6.2.zip
unzip uploadwidget_4.6.2.zip
unzip filetools_4.6.2.zip
unzip notification_4.6.2.zip
unzip notificationaggregator_4.6.2.zip
rm *.zip
drush en -y ckeditor_uploadimage
이미지 사이즈 변경하기
https://www.drupal.org/project/inline_responsive_images
대화상자에서 미리 지정된 이미지 크기로 변환할 수 있다. 프로젝트 페이지 설명에 따르면 사용자가 이미지의 크기를 숫자로 직접지정하는 것보다 미리 정해놓은 크기로 지정하는 것이 좋다고 한다. 다시 말해 임의의 크기로는 변경할 수 없다.
모듈 설치하기
drush en -y inline_responsive_images
모듈 설정하기
Text formats and editors (/admin/config/content/formats) 에서 적용하고자 하는 양식의 수정하기로 들어간다.
"활성화된 필터"에서 다음 두가 지 방법을 선택할 수 있다.
Display image styles
Uses the data-image-style attribute on <img> tags to display image styles.Display responsive images
Uses the data-responsive-image-style attribute on <img> tags to display responsive images.
"Display image styles"을 선택하면 화면아래에 "필터설정"이 생기고 사이트의 모든 이미지 스타일 목록(/admin/config/media/image-styles)을 보여주고 사용하고 하는 것을 선택할 수 있다.
"Display responsive images"를 선택하면 "narrow"와 "wide" 두 개를 선택할 수 있다.
참고) "Display image styles"와 "Display responsive images"를 모두 선택하면 "Display image styles"는 적용되지 않는다.
FontColor 버튼 추가하기
https://www.drupal.org/project/colorbutton
https://www.drupal.org/project/panelbutton
colorbutton은 panelbutton 모듈을 필요로 한다.
Ckeditor Addon 설치하기
http://ckeditor.com/addon/colorbutton
http://ckeditor.com/addon/panelbutton
cd libraries
wget https://download.ckeditor.com/colorbutton/releases/colorbutton_4.7.3.zip
wget https://download.ckeditor.com/panelbutton/releases/panelbutton_4.7.3.zip
unzip colorbutton_4.7.3.zip
unzip panelbutton_4.7.3.zip
rm *.zip
모듈 설치하기
drush en -y panelbutton
drush en -y colorbutton
설정하기
Text formats and editors (/admin/config/content/formats) 에서 적용하고자 하는 양식의 수정하기로 들어간다.
사용할 수 있는 버튼 목록에 빨간색 부분이 추가된 것을 볼 수 있다.
위 빨간색 버튼들을 Active Toolbar에 드래그앤드랍으로 옮긴다. 첫번째 버튼이 글자색 변경이고, 두번째 버튼이 배경색 변경이다.
특정색 추가하기
/libraries/colorbutton/plugin.js 에
CKEDITOR.config.colorButton_colors 을 찾아 hex value를 추가해준다.
주의) Text format 에서 Color Button 항목에 color를 추가하면 기본 값이 모두 없어지고 추가한 값만 나타난다.
Font Size & Font Family
https://www.drupal.org/project/ckeditor_font
http://ckeditor.com/addon/font
Ckeditor Addon 설치하기
cd libraries
wget https://download.ckeditor.com/font/releases/font_4.7.3.zip
unzip font_4.7.3.zip
rm *.zip
모듈 설치하기
drush en ckeditor_font -y
설정
텍스트 양식에서 버튼을 Active Toolbar 추가해준다.
f: 글꼴, S: 글자 크기
비디오 Embed 하기
모듈 활성화하기
video_embed_wysiwyg
설정하기
관리자(환경설정 >> 콘텐츠 저작 >> Text formats and editors)에서 “Video Embed WYSIWYG” 필터를 체크한다.
Video Embed 버튼을 툴바에 옮겨놓는다.
설정을 저장한다.
Color Dialog 사용하기
색을 직접 선택할 수 있는 Color Dialog는 아직 정식 모듈이 없다. sandbox 에서 설치해주어야 한다. 하지만 설치해도 작동하지 않았다.
https://www.drupal.org/sandbox/mariekirya/2785305
기타 모듈들
https://www.drupal.org/node/2735151
https://www.drupal.org/docs/8/core/modules/ckeditor/overview