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
120
Drupalのデモサイト作って明日までに!と言われたら
kazukomurata
0
830
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
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
240
Devoxx BE - Local Development in the AI Era
kdubois
0
130
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
200
Catch Up: Go Style Guide Update
andpad
0
220
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
480
Cursorハンズオン実践!
eltociear
2
1k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.1k
チームの境界をブチ抜いていけ
tokai235
0
170
CSC305 Lecture 05
javiergs
PRO
0
210
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
840
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
380
Featured
See All Featured
Side Projects
sachag
455
43k
Speed Design
sergeychernyshev
32
1.2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Music & Morning Musume
bryan
46
6.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Leading Effective Engineering Teams in the AI Era
addyosmani
2
320
Designing Experiences People Love
moore
142
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
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