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

f:id:ryoutaku_jo:20190710204423p:plain

【結論】

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

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

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

【目次】

【本題】

CKeditor4の機能拡張方法

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

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

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

ryoutaku-jo.hatenablog.com

ryoutaku-jo.hatenablog.com

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

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

CKEDITOR.replace( 'editor', {

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

〜中略〜

});

f:id:ryoutaku_jo:20190711001323g:plain

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

f:id:ryoutaku_jo:20190711001451g:plain

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

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

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

CKEDITOR.replace( 'editor', {

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

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

〜中略〜

});

f:id:ryoutaku_jo:20190711001948g:plain

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

CKEDITOR.replace( 'editor', {

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

〜中略〜

});

f:id:ryoutaku_jo:20190711001759g:plain

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

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

//カスタムスタイルの定義
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',
});

f:id:ryoutaku_jo:20190711002200g:plain

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

参考情報

※ファイルアップロードについて 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

《今日の学習進捗(3年以内に10000時間に向けて)》

CKEditorだが、現状の仕様でもWrodを使える程度のITリテラシーのある方なら問題なく使えると考えていたが、CTOからこれでは分かりづらいとレビューを受けて、認識が甘かったと実感した。

実際に開発に携わるエンジニアとして、最もサービスに触れる機会が多い事で、こういった認識のズレは今後も発生すると考えている。

今後は、実際にサービスを利用される非エンジニア(特に事務局)の方は、自分の想像以上にITリテラシーは低いと想定して開発に取り組むことで、開発効率とサービスの品質向上に努めたい。

学習開始からの期間 :215日
今日までの合計時間:2084h
一日あたりの平均学習時間:9.7h
今日までに到達すべき目標時間:1963h
目標との解離:121h
「10,000時間」まで、

残り・・・「7916時間!」