Drupal8 CKEditor TIps

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つ１つ読み込みするのはめんどくさいですよね。  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