CKEditorを自分色に染める(4)

今回は、

1. エディタ領域のサイズ指定
2. ダイアログのリサイズ時のサイズ指定

を扱う。

1. エディタ領域のサイズ指定

まず、初期表示状態のサイズ指定は、

 config.width  = 640;
 config.height = 480;

などとする。

次に、リサイズ時のサイズ指定は、

 config.resize_maxWidth  = 1024;
 config.resize_maxHeight = 768;
 config.resize_minWidth  = 640;
 config.resize_minHeight = 480;

などとする。

デザイン的に色々リサイズされると崩れて困る場合は、

config.resize_enabled  = false;      //そもそもリサイズさせない
 config.resize_dir      = 'vertical'; //リサイズは縦方向のみに限定する

などとする。

2. ダイアログのリサイズ時のサイズ指定

ダイアログのサイズなどの定義は、プラグイン自体かダイアログ定義イベントハンドラで指定することになる。
ダイアログ定義イベントハンドラで指定する場合は、

CKEDITOR.on( 'dialogDefinition', function( ev )
  {
    //定義中のダイアログ種類名を取得する
    var dialogName = ev.data.name;

    //ダイアログ定義を取得する
    var dialogDefinition = ev.data.definition;

    //全ダイアログ共通してリサイズを無効にする
    dialogDefinition.resizable = CKEDITOR.DIALOG_RESIZE_NONE;

    //ダイアログ個別に指定する
    if ( dialogName == 'image' )
     {
        //縦横方向のリサイズを許可する
        dialogDefinition.resizable = CKEDITOR.DIALOG_RESIZE_BOTH;

        //ダイアログ初期表示サイズ
        dialogDefinition.width  = 640;
        dialogDefinition.height = 480;

        //ダイアログ最小表示サイズ
        dialogDefinition.minWidth  = 320;
        dialogDefinition.minHeight = 240;

        // ( これ以降は独自実装 )
        //ダイアログ最大表示サイズ
        //CKEditor v3.6では最大表示サイズが指定出来ないので、独自プロパティを設定する
        dialogDefinition.maxWidth  = 800;
        dialogDefinition.maxHeight = 500;

        //定義中のダイアログのリサイズイベントハンドラを定義
        dialogDefinition.dialog.on('resize',function(e){
          //リサイズ後のダイアログサイズ
          var resizedWidth  = e.data.width;
          var resizedHeight = e.data.height;

          //リサイズされたダイアログ
          var senderDialog           = e.sender;
          var senderDialogDefinition = e.sender.definition;

          //ダイアログ最大表示サイズ
          var maxWidth  = senderDialogDefinition.maxWidth;
          var maxHeight = senderDialogDefinition.maxHeight;

          //最大表示サイズを超過している場合は、適宜補正する
          var revisedWidth  = maxWidth < resizedWidth   ? maxWidth  : resizedWidth;
          var revisedHeight = maxHeight < resizedHeight ? maxHeight : resizedHeight;
          
          if( revisedWidth  < resizedWidth ||
              revisedHeight < resizedHeight )
            {
              //リサイズをやり直し
              senderDialog.resize( revisedWidth, revisedHeight );
            }
        });  
     }
 });

などと記述する。
ダイアログ自体のカスタマイズは、これを参考に進められる。