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

Drupal8 CKEditor TIps

Drupal8 CKEditor TIps

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

29c60cc9d6ccf002660af74d52800435?s=128

kazukomurata

August 30, 2017
Tweet

Transcript

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

  2. 自己紹介  村田 和子 (@kazuno_ko85)  デジタルサーカス株式会社 所属  Drupal

    は2015年1月~  正直に言うとガチのプログラマーではないですが・・・  保守しやすいサイトのためなら、新技術はどんどん取り入れたい。 磐田市のゆるキャラ「しっぺい」
  3. 今日はCKEditorに注目します  運用フェーズに入ったお客様よりコンテンツの入力時の質問をコンスタントに問 い合わせが来ます。  実装時のhtmlコーディングは、自分の好きなツールを使うことが多く、実はコン テンツ入力周りのことはよく知らないことが多かったです。  「コンテンツ」の入力を補助するCKEditorを勉強してみました。 

    今日はDrupal8に範囲を絞ります。
  4. CKEditorって・・・  WYSIWYG(ウィジウィグ)エディタです。  Html入力が楽にできるツールです。  こういうのです↓  Drupal のWYSIWYGエディタといえば・・・CKEditorです!

     CKEditor そのものはJavascriptソース。  https://ckeditor.com/
  5. Drupal8 デフォルトは・・・  インストール直後のセット  コアにあるフルセット

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

    るので、そこからピックアップします。
  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
  8. 画像・動画  IMCE  画像指定の定番?  https://www.drupal.org/project/imce  CKEditor Media

    Embed Plugin  動画表示  https://www.drupal.org/project/ckeditor_media_embed
  9. レイアウト拡張  CKEditor Color Button  文字色が指定できます  https://www.drupal.org/project/colorbutton 

    CKEditor Bootstrap Buttons  Bootstrapのボタンをつける  https://www.drupal.org/project/ckeditor_bootstrap_buttons
  10. 便利ツール  CKEditor Templates  Htmlのテンプレートを挿入できます。  https://www.drupal.org/project/ckeditor_templates  CKEditor

    Accessibility Checker  構文チェックをしてくれます。もうすぐコアに入りそう。  https://www.drupal.org/project/ckeditor_a11ychecker
  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