CKEDITOR 2 차 개발 플러그 인 개발 방법

시작 하기 전에 CKEditor 소스 코드 의 조직 형식 을 감성 적 으로 인식 하 는 것 이 유용 합 니 다.CKEditor 고유의 일부 파일 은 ckeditor\ 로 구성 되 어 있 습 니 다.source 디 렉 터 리 에 있 습 니 다.DOM 요소 작업,이벤트 처리,스 크 립 트 초기 화,환경 설정 등 핵심 기능 이 ckeditor\ 에 포함 되 어 있 습 니 다.source\core 폴 더 에 있 습 니 다.다른 기능,예 를 들 어 포맷,복사,붙 여 넣 기,그림 과 링크 등 은 모두 플러그 인 형식 으로 ckeditor\ 에 놓 여 있 습 니 다.source\plugins 폴 더 에 있 습 니 다.폴 더 마다 플러그 인 을 표시 합 니 다.또한 폴 더 마다 plugin.js 파일 이 플러그 인 에 필요 한 코드 를 포함 하고 있 습 니 다.
원본 코드 가 서로 다른 파일 로 구 성 된 것 을 볼 수 있 습 니 다.HTTP 요청 을 줄 이기 위해 CKEditor 는 서로 다른 파일 을 압축 하여 ckeditor.js 와 ckeditor 로 압축 합 니 다.basic.js 리.
날짜 플러그 인 만 들 기(date)
1."ckeditor\plugins\"디 렉 터 리 에"date"디 렉 터 리 를 새로 만 든 다음"date"디 렉 터 리 에"plugin.js"를 새로 만 들 고 다음 코드 를 입력 하 십시오.

CKEDITOR.plugins.add('date', {
  requires: ['dialog'],
  init: function (a) {
    var b = a.addCommand('date', new CKEDITOR.dialogCommand('date'));
    a.ui.addButton('date', {
      label: a.lang.date.toolbar,
      command: 'date',
      icon: this.path + 'images/date.jpg'
    });
    CKEDITOR.dialog.add('date', this.path + 'dialogs/date.js');
  }
});

2."images"디 렉 터 리 를 추가 하고"date.jpg"의 그림 을 넣 습 니 다.물론 그림 은 구 글 에서 찾 을 수 있 습 니 다.16*16 크기 가 적당 합 니 다.
3."dialogs"디 렉 터 리 를 추가 하고"date.js"를 새로 만 듭 니 다.다음 코드 를 입력 하 십시오.

CKEDITOR.dialog.add('date', function(editor){
  var escape = function(value){
    return value;
  };
  return {
    title: '    ',
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    minWidth: 300,
    minHeight: 80,
    contents: [{
      id: 'cb',
      name: 'cb',
      label: 'cb',
      title: 'cb',
      elements: [{
        type: 'text',
        label: '         ',
        id: 'lang',
        required: true,
      },{
        type:'html',
        html:'<span>  ：         、           。</span>'
      }]
    }],
    onOk: function(){
      lang = this.getValueOf('cb', 'lang');
      editor.insertHtml("<p>" + lang + "</p>");
    },
    onLoad: function(){
    }
  };
});

4.다음은 플러그 인 을 CKEditor 에 넣 는 것 입 니 다.저 는 CKEditor 플러그 인의 핵심 파일 을 직접 수정 합 니 다.
ckeditor 디 렉 터 리 에 있 는"ckeditor.js"를 찾 았 습 니 다.이 코드 는 압축 된 것 입 니 다.우 리 는 CKEditor 의 원래 about 플러그 인 을 참고 합 니 다."about"을 찾 습 니 다.

fullPage:false,height:200,plugins:'about,basicstyles

그리고'about'뒤에'date'를 추가 하면 여기 가...

plugins:'about,date,basicstyles

계속"about"을 찾 습 니 다.

j.add('about',{init:function(l){var m=l.addCommand('about',new a.dialogCommand('about'));m.modes={wysiwyg:1,source:1};m.canUndo=false;l.ui.addButton('About',{label:l.lang.about.title,command:'about'});a.dialog.add('about',this.path+'dialogs/about.js');}});

이 j 앞 에 추가.

j.add('date', {requires: ['dialog'],init: function(l){l.addCommand('date', new a.dialogCommand('date'));l.ui.addButton('date', {label: l.lang.date.toolbar,command: 'date',icon: this.path + 'images/code.jpg'});a.dialog.add('date', this.path + 'dialogs/date.js');}});

다음은"i.toolbar"를 찾 습 니 다.Basic=",이것 이 바로 CKEditor 의 기본 도구 모음 입 니 다.여기에"date"를 추가 하면 원 하 는 위치 에 추가 할 수 있 습 니 다.예 를 들 어.

['Maximize','ShowBlocks','-','date']

5."ckeditor\lang"에 들 어가 서"zh-cn.js"에"date:"날짜 플러그 인"을 추가 합 니 다.

,date:{toolbar: '    '}, link: { toolbar: '  /     ', other: '<  >', 

6.CKEditor 에 대한 수정 은 이미 OK 입 니 다.
물론 ckeditor 도구 모음 을 표시 할 때 설정 할 수 있 습 니 다:config.js 열기

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
  // Define changes to default configuration here. For example:
  // config.language = 'fr';
  // config.uiColor = '#AADC6E';

  config.toolbar =
  [
    ['Source'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'Link', 'Unlink', 'Anchor'],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'ImageButton', 'Image'],
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor'],
    ['date'] //        （date）
  ];


};

인 스 턴 스 그림: