BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. ウェブ編集者

プラグイン開発方式のCKEDITOR二次開発

2022-01-04 03:36:31

その前に、CKEditorのソースコードがどのように構成されているかを知っておくと便利です。CKEditorに固有のファイルのいくつかは、ckeditor_sourceディレクトリに編成されています。DOM要素操作、イベント処理、初期化スクリプト、いくつかの環境設定などのコア機能はckeditor_sourcecoreフォルダに含まれています。その他の機能（書式設定、コピー＆ペースト、画像、リンクなど）は、プラグインとしてckeditor_sourcepluginsフォルダに実装されている。各フォルダはプラグインを表している。そして、それぞれのフォルダの中に、プラグインに必要なコードを含むplugin.jsファイルが存在する。

ソースコードがさまざまなファイルに整理されているのがわかると思います。HTTPリクエストを減らすために、CKEditorは異なるファイルをckeditor.jsとckeditor_basic.jsに圧縮してパッケージ化します。

日付プラグインを作成する（date）

1. 1.ディレクトリに新規に "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. 2.ディレクトリを追加して、date.jpgの画像を置いてください。

3. dialogs"ディレクトリを追加し、新しい"date.js"を作成し、以下のコードを入力してください。 

CKEDITOR.dialog.add('date', function(editor){
  var escape = function(value){
    return value;
  };
  return {
    title: 'Calendar control',
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    minWidth: 300,
    minHeight: 80,
    contents: [{
      id: 'cb',
      name: 'cb',
      label: 'cb',
      title: 'cb',
      elements: [{
        type: 'text',
        label: 'Please enter the name of the date control',
        id: 'lang',
        required: true,
      },{
        type:'html',
        html:'<span> Description: The date and time selected by the calendar control will be backfilled into this input box. </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

そして、quot;about" の後に "date" を追加して、ここでは次のようになります。 

plugins:'about,date,basicstyles

を探し続けてください。 

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');}});

これはCKEditorのデフォルトツールバーで、ここに"date"を追加しています。 

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

5. 5. ckeditorlang"に移動して、"zh-cn.js"に "date:'date plugin'" を追加してください。 

,date:{toolbar: 'Date control'}, link: { toolbar: 'Insert/edit hyperlink', other: '<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'] // just created the date plugin (date)
  ];


};

インスタンス画像です。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します