CKeditor4の機能拡張方法(ドラック&ドロップ・動画埋め込み・カスタムスタイル)

【結論】

uploadfileを導入すれば、ドラック&ドロップでアップロードも可能になる。

embedを導入すれば、YouTubeなどの動画メディアを埋め込める。autoembedを導入すれば、リンクを貼り付けるだけで自動で埋め込める。

・画像を均等に横並びさせるなど、任意をスタイルを当てたい場合は、カスタムスタイルを設定する事も可能。

【目次】

【本題】

CKeditor4の機能拡張方法

リッチエディタであるCKeditorは、デフォルトでも多くの機能を提供していますが、更に機能を追加したい場合は、各種プラグインを導入する必要があります。

今回は、そのプラグインについてまとめます。

※CKEditorについては、以下の記事参照

ryoutaku-jo.hatenablog.com

ryoutaku-jo.hatenablog.com

ドラック&ドロップでファイルアップロード(uploadfile)

ファイルをアップロードする際、アイコンから選択しなくても、ドラック&ドロップでアップロードされる様にする場合は、uploadfileを導入します。

CKEDITOR.replace( 'editor', {

  //拡張プラグインを導入
  extraPlugins: [ 'image2', 'uploadfile', ],

〜中略〜

});

なお、画像の場合は、そのまま表示されます

YouTubeなどの動画メディアの埋め込み

YouTubeなどの動画メディアの埋め込みたい場合はembedを利用します。

また埋め込むメディアを認識させる為に、コールバック用のURLも指定する必要があります。

CKEDITOR.replace( 'editor', {

  //拡張プラグインを導入
  extraPlugins: [ 'image2', 'uploadfile', 'embed' ],

  //embedとの連携用(動画メディアのURLを貼り付けるだけ自動埋め込み)
  embed_provider: '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',

〜中略〜

});

またautoembedを導入することで、動画のURLをフォームに貼り付けるだけで自動埋め込みが出来ます。

CKEDITOR.replace( 'editor', {

  //拡張プラグインを導入
  extraPlugins: [ 'image2', 'uploadfile', 'embed', 'autoembed', ],

〜中略〜

});

画像の横並びに対応(カスタムスタイル)

画像を横一列に均一な幅で配置させたい場合などは、独自のスタイルを設定して、それを適用させる必要があります。

//カスタムスタイルの定義
CKEDITOR.stylesSet.add( 'my_styles', [
  // Block-level styles.
  { name: 'グレーライン',  element: 'h3', styles: {
    'background': '#eeeeee',
    'border': '1px solid #cccccc',
    'padding': '15px' }
  },

  // Inline styles.
  { name: '画像横並び', element: 'span', styles: {
    'justify-content': 'space-around',
    'display': 'flex',
    'text-align': 'center',
    'flex-direction': 'row',
    'flex-wrap': 'wrap',
    'align-items': 'center', }
  },
  { name: 'イエローマーカー', element: 'span', styles: {
    'background-color': 'Yellow' }
  },
]);

CKEDITOR.replace( 'editor', {

〜中略〜

  stylesSet: 'my_styles',
});

この他にも独自のスタイルを設定することで、様々なレイアウトを適用させる事が可能です。

参考情報

※ファイルアップロードについて https://ckeditor.com/docs/ckeditor4/latest/guide/dev_howtos_file_upload.html

※動画の貼り付けについて https://ckeditor.com/docs/ckeditor4/latest/examples/mediaembed.html

※スタイルのカスタマイズについて https://ckeditor.com/docs/ckeditor4/latest/guide/dev_howtos_styles.html