Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Drupal8 CKEditor TIps
Search
kazukomurata
August 30, 2017
Programming
0
430
Drupal8 CKEditor TIps
Drupal8 CKEditor関係の便利モジュールの紹介です。
kazukomurata
August 30, 2017
Tweet
Share
More Decks by kazukomurata
See All by kazukomurata
Migrate Drupal7 to Drpual8
kazukomurata
0
270
Drupal8 Migrate API
kazukomurata
0
340
Drupal8 Problem of multilingualization of contents
kazukomurata
0
110
Drupalのデモサイト作って明日までに!と言われたら
kazukomurata
0
810
Drupal7 & 8 翻訳コンテンツの罠
kazukomurata
0
260
Drupal7×Cloudfront×SSL
kazukomurata
0
270
Drupal8 State API と Configuration API
kazukomurata
0
280
Drupal8 2016/11
kazukomurata
0
70
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
230
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.7k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
920
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Goで作る、開発・CI環境
sin392
0
220
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
150
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
660
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Code Reviewing Like a Champion
maltzj
524
40k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
How GitHub (no longer) Works
holman
314
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Music & Morning Musume
bryan
46
6.6k
Designing for humans not robots
tammielis
253
25k
Statistics for Hackers
jakevdp
799
220k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Designing for Performance
lara
610
69k
Transcript
Drupal8 CKEditor Tips 村田 和子 (@kazuno_ko85)
自己紹介 村田 和子 (@kazuno_ko85) デジタルサーカス株式会社 所属 Drupal
は2015年1月~ 正直に言うとガチのプログラマーではないですが・・・ 保守しやすいサイトのためなら、新技術はどんどん取り入れたい。 磐田市のゆるキャラ「しっぺい」
今日はCKEditorに注目します 運用フェーズに入ったお客様よりコンテンツの入力時の質問をコンスタントに問 い合わせが来ます。 実装時のhtmlコーディングは、自分の好きなツールを使うことが多く、実はコン テンツ入力周りのことはよく知らないことが多かったです。 「コンテンツ」の入力を補助するCKEditorを勉強してみました。
今日はDrupal8に範囲を絞ります。
CKEditorって・・・ WYSIWYG(ウィジウィグ)エディタです。 Html入力が楽にできるツールです。 こういうのです↓ Drupal のWYSIWYGエディタといえば・・・CKEditorです!
CKEditor そのものはJavascriptソース。 https://ckeditor.com/
Drupal8 デフォルトは・・・ インストール直後のセット コアにあるフルセット
拡張するには・・・ CKEditorプラグインを導入 使いたいプラグインを使用ページに読み込みすれば使える。 https://ckeditor.com/addons/plugins/all でも1つ1つ読み込みするのはめんどくさいですよね。 Drupalにプラグイン読み込み用のコントリビューションモジュールがたくさんあ
るので、そこからピックアップします。
リンク拡張 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
画像・動画 IMCE 画像指定の定番? https://www.drupal.org/project/imce CKEditor Media
Embed Plugin 動画表示 https://www.drupal.org/project/ckeditor_media_embed
レイアウト拡張 CKEditor Color Button 文字色が指定できます https://www.drupal.org/project/colorbutton
CKEditor Bootstrap Buttons Bootstrapのボタンをつける https://www.drupal.org/project/ckeditor_bootstrap_buttons
便利ツール CKEditor Templates Htmlのテンプレートを挿入できます。 https://www.drupal.org/project/ckeditor_templates CKEditor
Accessibility Checker 構文チェックをしてくれます。もうすぐコアに入りそう。 https://www.drupal.org/project/ckeditor_a11ychecker
便利ツール 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