CKeditor4の機能拡張方法(ドラック&ドロップ・動画埋め込み・カスタムスタイル)
【結論】
・uploadfile
を導入すれば、ドラック&ドロップでアップロードも可能になる。
・embed
を導入すれば、YouTubeなどの動画メディアを埋め込める。autoembed
を導入すれば、リンクを貼り付けるだけで自動で埋め込める。
・画像を均等に横並びさせるなど、任意をスタイルを当てたい場合は、カスタムスタイルを設定する事も可能。
【目次】
【本題】
CKeditor4の機能拡張方法
リッチエディタであるCKeditor
は、デフォルトでも多くの機能を提供していますが、更に機能を追加したい場合は、各種プラグインを導入する必要があります。
今回は、そのプラグインについてまとめます。
※CKEditorについては、以下の記事参照
ドラック&ドロップでファイルアップロード(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