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
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
290
All About Angular's New Signal Forms
manfredsteyer
PRO
0
110
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
360
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
CSC509 Lecture 03
javiergs
PRO
0
330
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
430
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
チームの境界をブチ抜いていけ
tokai235
0
160
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
510
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
BBQ
matthewcrist
89
9.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Navigating Team Friction
lara
189
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
We Have a Design System, Now What?
morganepeng
53
7.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
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