CKEditorにカスタムボタン（Plugin）を追加する

前回掲載した記事「CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？」で、WYSIWYGエディターのカスタムボタン（Plugin）からの入力を紹介しました。

今回の記事では、その実装方法をご紹介いたします。

設定手順

今回はDrupal CMSにCKEditorを導入し、CKEditorのPlugin機能を使いカスタムボタンを実装します。
Drupalに実装しますが、基本はCKEditorのカスタマイズなので、その他CMSでも同じようにカスタマイズすることができます。

今回の実装環境

• Drupal7
• CKEditor4

Drupalモジュール foobarを作成

CKEditorは基本「ckeditor.config.js」に設定を記述しますが、Drupalの場合設定がDatabaseに入ってしまうので、hook関数を使用し、Pluginを追加します。
 

1. ディレクトリ作成

   「/sites/all/modules/foobar」を作成します。
    

2. foobar.infoファイルを作成
   

   name = foobar
   description = ckeditor custom button plugin
   core = 7.x
   

3. foobar.moduleファイルを作成
   

   <?php
   function foobar_wysiwyg_plugin($editor, $version) {
    
   switch ($editor) {
    case 'ckeditor':
   
     return array(
      'foobar' => array(
       'path' => drupal_get_path('module', 'foobar') . '/foobar',
       'buttons' => array(
        'foobar_button' => t('Do something awesome'),
       ),
       'load' => TRUE,
      ),
     );
     break;
    }
   }
   
   

4. 作成したfoobarモジュールを有効にします。

CKEditorのPlugin作成

続いてCKEditorのPluginを作成します。ここからの設定はその他CMSでも基本同じです。

1. foobarディレクトリを作成

   「ckeditor/plugins/foobar」を作成します。
    

2. plugin.jsファイルを作成
    

   (function($) {
    CKEDITOR.plugins.add( 'foobar', {
     init: function( editor )
     {
      editor.addCommand( 'my_command', {
   
       // editor設定
       exec : function( editor ) {
   
        //here is where we tell CKEditor what to do.
        editor.insertHtml( 'Insert Text ' );
       }
      });
   
      // CKEditorボタン設定
      editor.ui.addButton( 'foobar_button', {
       label: 'Do something awesome', 
       command: 'my_command',
       icon: this.path + 'images/icon.png'
      });
     }
    });
   })(jQuery);

3. CKEditor コンフィグ設定（Drupalの場合は不要です）
   ckeditor.config.jsに下記行を追加します。

   CKEDITOR.editorConfig = function(config) {
      config.extraPlugins = 'foobar';
   }

4. Pluginを有効にする（Drupalのみ）

   Durpal管理画面「環境設定 > CKEditor > プロフィール編集」を開き、作成したPlugin「foobar」を有効にします。
   

設定は以上です。
追加したカスタムボタン（Plugin）をWYSIWYGエディターに反映し、ボタンをクリックすると「Insert Text」が挿入されたかと思います。

最後に

「CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？」で紹介させていただきましたが、CMSはwebの専門知識がないユーザーも入力を行うことを想定して設計しなくてはいけません。

誰が入力しても「デザインの統一」をするためには、今回紹介したWYSIWYGのテンプレート機能か、カスタムボタンを使うことで実現が可能です。

CMSを導入したが操作が難しいと感じるかたは、参考にしてみてください。

関連記事

CKEditor Document Configs （外部サイト）
Drupalとの連携にかかわらずCKEditorの設定を変更する場合にconfigの変更が必要です。

DrupalのCKEditorにテンプレート挿入機能を追加

CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？

google-code-prettifyでソースコードを見やすくする