CKEditorで画像貼り付け時にデフォルトクラスを割り当てる

WYSIWYGエディタの出現でブログ等の記事を書く時にHTMLタグを書くことは少なくなりましたね。
 
人気のWYSIWYGエディタにTinyMCEやCKEditorが挙げられますが、このサイトは記事を書く時にCKEditorを使っています。

サイト側でBootstrapなどのCSSフレームワークを使っていると、レスポンシブデザインとの兼ね合いで特定のメディア要素にクラスを割り当てたい時があります。っというのも、WYSIWYGエディタは基本タグにクラスは含まれないので、画像等を貼り付ける時は基本的にサイズを指定することになります。

「画像を貼り付けた後、毎回 class="img-responsive" を追加するのは面倒 ....」

ってことで、CKEditorで画像を貼り付ける時に自動的にclassを追加する方法を紹介します。
( * CKEditorのStandard, Full Packageが対象です )

CKEditorの設定の変更には'ckeditor/config.js'を編集していくことになります。

CKEditorのStandard Packageをお使いの方は下記の部分をコメントアウトして、imageダイアログ内のadvancedメニューを表示させる必要があります。

// Full Packageを使っている場合はコメントアウトする必要はありません
// config.removeDialogTabs = 'image:advanced;link:advanced';

config.allowedContent = true;

次にdialogが開かれた時のイベントになります。下記のコードをconfig.js内に追加してください。
( 今回は画像を貼り付けた時に'img-responsive', 'img-thumbnail', 'center-block'の3つのクラスが追加されるようにしました )

// dialogが開かれた時の処理
CKEDITOR.on('dialogDefinition', function( ev )
{
    // ダイアログ名の取得
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    // imageダイアログが開かれた時の処理
    if ( dialogName == 'image' )
    {
        // advance内の値を取得
        var info = dialogDefinition.getContents( 'advanced' );

        /// cssクラスを取得
        var styleClass = info.get( 'txtGenClass' );
				
        /// ここでCSSクラスが指定出来ます
        styleClass['default'] = 'img-responsive img-thumbnail center-block';
    }

});

正しく動いていると下記の画像のようにimageダイアログを開いた時にclassが自動的に割り当てられます。

また、tableにクラスを割り当てたい時も同じような要領で出来ます。
( * CKEditorのFull Packageが対象 )

CKEDITOR.on('dialogDefinition', function( ev )
{
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    
    // tableのダイアログが開かれた時の処理
    if ( dialogName == 'table' )
    {
        var info = dialogDefinition.getContents( 'advanced' );

        var styleClass = info.get( 'txtGenClass' );
				
        /// CSSクラスの指定
        styleClass['default'] = 'table table-striped';
    }

});

以上で完了です。

クラスを手打ちする必要も無くなるので、CKEditorをお使いの人はゼヒ×2参考にしてください！