CKEditorのサーバブラウザ機能で選択した画像URLをカスタマイズする

2015/11/06 JavaScript/jQuery  このエントリーをはてなブックマークに追加
ckeditor


WYSIWYGエディタ「CKEditor」と、相変わらず格闘させられています。
今回困ったのは下記のようなカスタマイズ依頼です。


・CKEditorの画像埋め込み時に、サーバブラウザ機能で画像一覧を表示。

・サーバブラウザで画像を選択すると、選択した画像のURLをフォームに挿入。

・この「選択した画像のURL」を希望する形式にカスタマイズしたい。


普通に考えたら、サーバブラウザ側を調整して……という話なんですが、この案件ちょっと特殊でして、CKEditor側を調整せざるをえなかったんです。途中で気づいて血の気が引きましたけど。

ということで、忘備録がてら書いておきます。CKEditorの画像埋め込みプラグインをカスタマイズするので、変更するファイルは、 ckeditor/plugins/image/dialogs/image.jp です。

▼変更前
children: [{
  id: "txtUrl",
  type: "text",
  …(中略)…
}, {
  type: "button",
  id: "browse",
  …(中略)…
  label: c.lang.common.browseServer,
  hidden: !0,
  filebrowser: "info:txtUrl"
}]



▼変更後
children: [{
  id: "txtUrl",
  type: "text",
  …(中略)…
}, {
  type: "button",
  id: "browse",
  …(中略)…
  label: c.lang.common.browseServer,
  hidden: !0,
  filebrowser: {
    action: 'Browse',
    onSelect: function( fileUrl, data ){
      // ここで画像URLをカスタマイズする
      var b = fileUrl;

      // ダイアログ取得
      //var dialog = CKEDITOR.dialog.getCurrent();
      var dialog = this.getDialog();

      // カスタマイズしたURLを設定
      dialog.setValueOf( 'info', 'txtUrl', b );
    }
  }

}]



こんな感じで。
少し解説します。


image.jsの初期設定では、browseボタンで選択された値は、infoタブのtxtUrlに値を返すようになっています。ここでは中略していますが、プレビュー欄の画像表示やサイズの取得は、この後にtxtUrlのonChange:function(){}で行っています。最初このtxtUrlのonChangeで調整してやろうと思ったのですが、再帰処理に引っかかって盛大に失敗しました。

browseボタンのfilebrowserの動作を個別に設定することでカスタマイズしています。action: 'Browse'は「サーバブラウザを開きますよ」という命令です。これを消すとサーバブラウザボタン自体が消えます(消したい時には知っているとある意味便利かもしれない)

onSelect: function( fileUrl, data ){}で、画像が選択された時の処理を追加します。この時fileUrlに選択した画像のURLが返ってきます(dataでエラーやその他情報を受け取ることもできますが、ここでは省略します)

選択したfileUrlの形式をカスタマイズしたら、初期動作であるinfoタブのtxtUrlに値を返すを実行しなければならないので、ダイアログ情報を取得して、手動で値を設定します。これで完成です。


注意事項として、検索するとdata['fileUrl']でURLを取得しているようなコードも出てくるのですが、今回私がテストした限りになりますが、この方法だと取得できませんでした。もしかしたらv3時代はこれで取得できたのかもしれません……さすがに未検証です。申し訳ない。

また、browseボタン側に書いているのにthis.getDialog();でtoo much recursionという再帰エラーが出ることがあります。その場合は、CKEDITOR.dialog.getCurrent()を利用してみてください。大体これで解決します。



以下参考にした公式のページです。


http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.fileButton

http://docs.ckeditor.com/#!/guide/dev_dialog_add_file_browser

http://docs.ckeditor.com/#!/api/CKEDITOR.dialog-method-setValueOf


以上参考になりましたら。
何かもっと良い方法が情報ください。

コメント

*
*

<< Material Design LiteのカラーclassがCustomizeのどれに当たるかわかるようにした | Chart.jsの棒グラフ(Bar)で、数値(data)を常時表示にする方法 >>