[개발/ckeditor4] ckeditor4 plugin 추가하는 방법

[개발/ckeditor4] ckeditor4 plugin 추가하는 방법 

 

 

사이트를 개발하다보면

 

텍스트 에디터를 붙이는 경우가 자주 있습니다.

 

그중에서 ckeditor4 버전을 사용하는 경우

 

추가 플러그인을 사용하는 경우가 있습니다.

 

그럴때는

 

아래와 같이 플러그인을 설정할 수 있습니다.

 

 

1. https://ckeditor.com/cke4/addons/plugins/all 링크로 들어가서 플러그인을 선택 및 다운로드 합니다.

 

2. 위에서 받은 플러그인을 원하는 경로에 업로드 합니다.

 

3. ckeditor 를 로드할때 아래 스크립트 옵션을 참고합니다.

 

 - addExrternal 를 이용하여 경로와 플러그인 명을 입력합니다.

 - editorConfig 를 시용하여 플러그인 명과 언어를 설정합니다.

 - replace 옵션에도 extraPlugins 에 플러그인 명을 설정합니다.

 - toolbar 원하는 버튼 위치에 사용하려는 플러그인 명을 넣어줍니다.

 

CKEDITOR.plugins.addExternal( 'spacingsliders', '/common/ckeditor/plugins/spacingsliders/', 'plugin.js' );
CKEDITOR.editorConfig = function( config )
{
    config.language = 'ko';
    config.extraPlugins = 'spacingsliders';
};

CKEDITOR.replace("content",{
        ...
    ,extraPlugins: 'spacingsliders'
    ,toolbar:
        [
            ...
            { name: 'colors',          items : [ 'TextColor', 'BGColor', 'spacingsliders' ] }
        ]
});

 

위 방법대로 하면

 

플러그인이 정상적으로 로드되어

 

에디터에 버튼까지 표시되실껍니다!

 

참고들 하세요!