Drupal8 CKEditor TIps

Drupal8 CKEditor関係の便利モジュールの紹介です。

Transcript

1. Drupal8 CKEditor Tips
   村田 和子 (@kazuno_ko85)
   

   View Slide

2. 自己紹介
    村田 和子 (@kazuno_ko85)
    デジタルサーカス株式会社 所属
    Drupal は2015年1月～
    正直に言うとガチのプログラマーではないですが・・・
    保守しやすいサイトのためなら、新技術はどんどん取り入れたい。
   磐田市のゆるキャラ「しっぺい」
   

   View Slide

3. 今日はCKEditorに注目します
    運用フェーズに入ったお客様よりコンテンツの入力時の質問をコンスタントに問
   い合わせが来ます。
    実装時のhtmlコーディングは、自分の好きなツールを使うことが多く、実はコン
   テンツ入力周りのことはよく知らないことが多かったです。
    「コンテンツ」の入力を補助するCKEditorを勉強してみました。
    今日はDrupal8に範囲を絞ります。
   

   View Slide

4. CKEditorって・・・
    WYSIWYG(ウィジウィグ)エディタです。
    Html入力が楽にできるツールです。
    こういうのです↓
    Drupal のWYSIWYGエディタといえば・・・CKEditorです!
    CKEditor そのものはJavascriptソース。
    https://ckeditor.com/
   

   View Slide

5. Drupal8 デフォルトは・・・
    インストール直後のセット
    コアにあるフルセット
   

   View Slide

6. 拡張するには・・・
   CKEditorプラグインを導入
    使いたいプラグインを使用ページに読み込みすれば使える。
    https://ckeditor.com/addons/plugins/all
    でも1つ１つ読み込みするのはめんどくさいですよね。
    Drupalにプラグイン読み込み用のコントリビューションモジュールがたくさんあ
   るので、そこからピックアップします。
   

   View Slide

7. リンク拡張
    D8 Editor Advanced link
    リンクのオプションが入力しやすくなります。
    https://www.drupal.org/project/editor_advanced_link
    CKEditor Anchor Link
    アンカー先をサクッと作成
    https://www.drupal.org/project/anchor_link
    Linkit
    他のコンテンツを探してリンクを作る。フィルター設定が細かくできる。
    https://www.drupal.org/project/linkit
   

   View Slide

8. 画像・動画
    IMCE
    画像指定の定番?
    https://www.drupal.org/project/imce
    CKEditor Media Embed Plugin
    動画表示
    https://www.drupal.org/project/ckeditor_media_embed
   

   View Slide

9. レイアウト拡張
    CKEditor Color Button
    文字色が指定できます
    https://www.drupal.org/project/colorbutton
    CKEditor Bootstrap Buttons
    Bootstrapのボタンをつける
    https://www.drupal.org/project/ckeditor_bootstrap_buttons
   

   View Slide

10. 便利ツール
     CKEditor Templates
     Htmlのテンプレートを挿入できます。
     https://www.drupal.org/project/ckeditor_templates
     CKEditor Accessibility Checker
     構文チェックをしてくれます。もうすぐコアに入りそう。
     https://www.drupal.org/project/ckeditor_a11ychecker
    

    View Slide

11. 便利ツール 2
     Entity Embed
     他のコンテンツをまるっと表示できます
     コアに入っているで有効にするだけ
     CKEditor CodeMirror
     ソースで見るとき、コードが見やすくなります。
     https://www.drupal.org/project/ckeditor_codemirror
     Asset Injector (CKEditorは関係ない)
     CSS, JSを管理画面で挿入(D7は別のモジュールでした)
     https://www.drupal.org/project/asset_injector
    

    View Slide