Creating a Simple CKEditor4 Plugin

기능 요구사항

1. 글상자 영역의 배경과 윤곽선 색상을 변경할 수 있다.

2. 글상자 영역의 윤곽선 두께를 변경할 수 있다.

 

플러그인 파일

먼저 CKEditor4 설치 후 plugins 디렉토리안에 bgstyle폴더를 생성한다.

• ckeditor root/
  • plugins/
    • bgstyle/
      • icons/
        • bgstyle.png
      • dialogs/
        • bgstyle.js
      • plugin.js

 

 

플러그인 소스 코드

CKEDITOR.plugins.add('bgstyle', {
    icons: 'bgstyle',
    init: function( editor ) {
        CKEDITOR.dialog.add('bgstyleDialog', this.path + 'dialogs/bgstyle.js')
        editor.addCommand('bgstyle', new CKEDITOR.dialogCommand('bgstyleDialog'))
        editor.ui.addButton('bgstyle', {
            label: '배경 꾸미기',
            command: 'bgstyle',
            toolbar: 'insert,100'
        })
    }
})

 

 

대화상자 소스 코드

let bgLabelId, bdLabelId
CKEDITOR.dialog.add('bgstyleDialog', function( editor ) {
    return {
        title: '배경 속성',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                        type: 'vbox',
                        children: [
                            {
                                type: 'hbox',
                                children: [
                                    {
                                        type: 'text',
                                        id: 'backgroundFillColor',
                                        label: '배경 채움색상',
                                        commandName: 'bgColortest',
                                        'default': '#ffffff',
                                        onLoad: function() {
                                            let dialog = this
                                            bgLabelId = dialog.domId
                                        }
                                    },
                                    {
                                        type: 'button',
                                        id: 'bgColor',
                                        label: '선택',
                                        onClick: function() {
                                            editor.execCommand('colordialog')
                                            editor.getColorFromDialog(function( color ) {
                                                if ( color ) {
                                                    document.querySelector(`#${bgLabelId} input`).value = color
                                                }
                                            })
                                        },
                                        onLoad: function() {
                                            this.getElement().getParent().setStyle("vertical-align", "bottom")
                                        }
                                    },
                                ]
                            },
                            {
                                type: 'hbox',
                                children: [
                                    {
                                        type: 'text',
                                        id: 'backgroundBorderColor',
                                        label: '윤곽선 색상',
                                        'default': '#000000',
                                        onLoad: function() {
                                            let dialog = this
                                            bdLabelId = dialog.domId
                                        }
                                    },
                                    {
                                        type: 'button',
                                        id: 'bdColor',
                                        label: '선택',
                                        onClick: function() {
                                            editor.execCommand('colordialog')
                                            editor.getColorFromDialog(function( color ) {
                                                if ( color ) {
                                                    document.querySelector(`#${bdLabelId} input`).value = color
                                                }
                                            })
                                        },
                                        onLoad: function() {
                                            this.getElement().getParent().setStyle("vertical-align", "bottom")
                                        }
                                    }
                                ]
                            },
                            {
                                type: 'text',
                                id: 'backgroundBorderWidth',
                                label: '두께',
                                'default': '1'
                            }
                        ]
                    },
                ]
            },undefined
        ],
        onOk: function() {
            let dialog = this
            document.querySelector(`#${Object.getOwnPropertyNames(CKEDITOR.instances)[0]}`).style.background = dialog.getValueOf('tab-basic', 'backgroundFillColor')
            document.querySelector(`#${Object.getOwnPropertyNames(CKEDITOR.instances)[0]}`).style.border = `${dialog.getValueOf('tab-basic','backgroundBorderWidth')}px solid ${dialog.getValueOf('tab-basic', 'backgroundBorderColor')}`
        },
    }
})

 

 

참고: https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.html