시작하기 전에

XE3(XpressEngine3) 3.0.12 ~ 3.0.13 버전의 엑스프레스엔진이 설치되어 있다고 가정합니다.
최초 설치시 자동으로 설치되는 플러그인 CKEditor4에 기능을 추가하여 사용할 수 있는 방법에 대해서 안내합니다.

플러그인 설정 파일 xe.ckeditor.define.js

xe.ckeditor.define.js 파일에 ckeditor를 로드할 때 사용되는 모든 config가 정의되어있습니다.
공식 CKEditor4에서 플러그인을 설치하고 지정된 경로인 /plugins/ckeditor/assets/ckeditor/plugins에 삽입하면
해당 config가 로드될 때 부가적인 플러그인을 가져옵니다. 때문에 xe.ckeditor.define.js 파일에 대해 알고 있어야하는 것 입니다.

Templates 플러그인 설치

CKEditor4에서 공식으로 제공하는 Templates를 설치해보고 XE3에 적용하여 플러그인을 자유롭게 추가하는 방법을 구체적으로 알아봅시다.
먼저 Templates 플러그인을 공식 저장소로 부터 다운로드합니다. 

다운로드를 완료하였다면 extraPlugins에 templates를 추가하라는 modal이 출력됩니다.
이 값을 위에서 알려드렸던 xe.ckeditor.define.js 파일을 열어 추가해줍니다.
toolbarGroup, extraPlugins에 templates를 추가하였다면 플러그인 설정은 완료한 것 입니다.
이제 다운로드 받은 플러그인을 경로에 옮겨주기만 하면 됩니다.

toolbarGroups: [
            { name: 'styles', groups: [ 'styles' ] },
            { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
            { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
            { name: 'forms', groups: [ 'forms' ] },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'colors', groups: [ 'colors' ] },
            { name: 'paragraph', groups: [ 'align', 'list', 'indent', 'blocks', 'bidi', 'paragraph' ] },
            { name: 'links', groups: [ 'links' ] },
            { name: 'insert', groups: [ 'insert' ] },
            { name: 'others', groups: [ 'others' ] },
            { name: 'tools', groups: [ 'tools' ] },
            { name: 'document', groups: [ 'mode', 'document', 'doctools', 'templates'] },
          ],

extraPlugins: 'xePasteImage,html5video,wordcount,templates',

Templates 플러그인 파일 옮기기

다운로드 받은 플러그인 templates_4.16.1을 압축해제 하여 폴더를 /plugins/ckeditor/assets/ckeditor/plugins에 넣어줍니다.
아래와 같이 폴더 이동을 완료하였다면 Templates 플러그인을 사용할 준비가 모두 완료되었습니다.


 

최종 결과 확인

자신의 XpressEngine을 열어 최종 결과물을 확인해보세요.
만약 동영상 처럼 Toolbar에 나타나지 않는다면 removeButtons에 Templates가 있는지 확인해보세요.
Templates가 removeButtons에 존재한다면 지우고 다시 확인해보세요 정상적으로 나타날 것 입니다.