Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drupal8 CKEditor TIps

Drupal8 CKEditor TIps

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

kazukomurata

August 30, 2017
Tweet

More Decks by kazukomurata

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide