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でソースコードを見やすくする

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。