CKEditor. Plugin 직접 만들기. 예: Cy-GistInsert

	개요
	CKEditor 에서 작동하는 플러그인 만드는 방법 본 글에서 예로 사용되는 플러그인 명칭 : CyGistInsert. 본 글에서 사용되는 CKEditor 버전 : 4.5.10.  (2016년 8월 27일 시점 최신버전) 정리된 내용. 1. CKEditor plugin 기본골격 만들기. 2. CKEditor plugin 에 대화상자 추가하기. 3. CKEditor plugin 에 컨텍스트 메뉴 추가하기. References. 1. plugin basic :  http://docs.ckeditor.com/#!/guide/plugin_sdk_sample 2. plugin 만들기 1 : http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 3. plugin 만들기 2 : http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_2

 

	상세1-CKEditor plugin 기본골격 만들기.
	단계1. 플러그인 폴더 구성. 폴더명 규칙: 폴더명은 플러그인 이름과 동일해야함. 즉, 플러그인 이름을 Cy-GistInsert 로 했다면 폴더명도 동일하게 Cy-GistInst 로 한다. 새로만든 플러그인 폴더 Cy-GistInsert 하위에 아래처럼 구성한다.   파일 : plugin.js (이 파일내에서 플러그인 코드 구현한다.) 폴더 : icons  폴더 icons 하위에 Cy-GistInsert.png (16x16 크기. 툴바에 표현할 이미지.) 만들어둔다. 본예에서 사용하는 이미지 :  단계2. plugin.js 에 기본 코드 추가. 본 단계2로 플러그인의 기본적인 형식은 준비완료된것. 단계3. 웹서버에 플러그인 폴더 업로딩. 웹서버의 CKEditor 하위 plugins 폴더에 상기 단계2에서 만든 Cy-GistInsert 폴더 모두 업로드 한다. 단계4. CKEditor 에서 신규 플러그인 적용처리. 웹서버의 ckeditor/config.js (아래 코드) 에 구문 config.extraPlugins = 'Cy-GistInsert'; 추가한다. Colored By Color Scripter™ 1 2 3 4 5 6 7 CKEDITOR.editorConfig = function( config ) {     // Define changes to default configuration here. For example:     // config.language = 'fr';     // config.uiColor = '#AADC6E';     config.extraPlugins = 'Cy-GistInsert'; };     CKEditor에서 추가된 플러그인 동작 확인. 상기 단계 4까지 해두면 CKEditor 에서 아래 붉박처럼 우리가 만든 플러그인의 아이콘이 표현되고, 아이콘 클릭시 시험용으로 출력문자열이 편집창(아래 그림 파박)에 정상적으로 보인다. 끝.  CKEditor 플러그인 기본 골격 만드는 방법. 2016년 8월 27일. 상세1에서 작업된 Cy-GistInsert 폴더 압축파일. -> Cy-GistInsert.zip

 

	상세2. CKEditor plugin 에 대화상자 추가하기.
	앞의 상세1에서 다룬것은 CKEditor 에서 plugin 으로 작동하기 위한 가장 기본적인 골격구성하는 방법. 본 상세2에서는 앞의 상세1 상태에서, 툴바의 아이콘 클릭시 대화상자 뜨게 하는 방법 정리. 단계1. 대화상자용 폴더및 파일추가. 플러그인 폴더 Cy-GistInsert 하위에 폴더 dialogs 만들고 dialogs 내에 파일 Cy-GistInsertDlg.js 만들어 둔다. 단계2. plugin.js 수정. 툴바의 버튼 클릭시 대화상자가 뜨도록 init 부분 의 addCommand 가 수정되었고, CKEDITOR.dialog.add 함수 추가되었다. Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /*  CKEditor Plugin   name : Cy-GistInsert.  2016-08-27.   by igotit.  */ CKEDITOR.plugins.add( 'Cy-GistInsert', {     icons: 'Cy-GistInsert',     init: function( editor ) {         editor.addCommand( 'cmd-insertgist1', new CKEDITOR.dialogCommand('Cy-GistInsertDlg'));          editor.ui.addButton( 'Cy-GistInsert', {             label: 'Insert GitHub Gist',      // button's tooltip text.             command: 'cmd-insertgist1',       // the command to be executed when the button is clicked.             toolbar: 'insert'                 // toolbar groub into which the button will be added         });         CKEDITOR.dialog.add('Cy-GistInsertDlg', this.path + 'dialogs/Cy-GistInsertDlg.js');  .      } });   단계3. Cy-GistInsertDlg.js 에 코드추가. - 대화상자로써 작용하도록 코드 추가 해야한다.  탭이 2개가 있고,  ok 버튼 클릭시 처리할 내용이 기록되었음이 중요. 대화상자 추가된 플러그인 정상동작 확인. 아래 아이콘 클릭하면 대화상자 정상적으로 실행된다.  상기 대화상자에서 확인 클릭시, 시험용으로 문자출력하게 해둔것이 CKEditor 편칩창에 삽입된다. 끝.  CKEditor 플러그인에서 대화상자 만들기. 상세2에서 작업된 Cy-GistInsert 폴더 압축파일. -> Cy-GistInsert.zip

 

	상세3. CKEditor plugin 에 컨텍스트 메뉴 추가하기
	컨텓스트 메뉴란 CKEditor 에서 우마우스 클릭시 나타나는 메뉴이며 플러그인에서 삽입한 element 를 편집하려고 할때 사용된다. 앞의 상세2 에서 대화상자 추가된 플러그인 상태에서 컨텍스트 메뉴 추가한다. 단계1. plugin.js 수정. 컨텍스트 메뉴 사용되게 하려면 plugin.js 에서 init 부분에 command와 button 정의한다. 단계2. Cy-GistInsertDlg.js   대화상자가 열릴때 이미 작성된것을 수정하는 모드인지 신규로 생성하는 모드인지 점검하고 분지처리하는 부분이 추가된다. 컨텍스트 메뉴 구현 결과. - 아래 그림처럼 코드삽입된 곳에서 우마우스 클릭하면 메뉴가 뜨고 Edit Cy-GistInsert 클릭하면 대화상자 뜬다. 끝. CKEditor 플러그인에 컨텍스트 메뉴 구현. 2018년 8월 28일. 상세3 까지 작업된 최종 Cy-GistInsert 폴더 압축파일. -> Cy-GistInsert.zip

 

///913.