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
370
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
240
Drupal8 Migrate API
kazukomurata
0
280
Drupal8 Problem of multilingualization of contents
kazukomurata
0
79
Drupalのデモサイト作って明日までに!と言われたら
kazukomurata
0
640
Drupal7 & 8 翻訳コンテンツの罠
kazukomurata
0
250
Drupal7×Cloudfront×SSL
kazukomurata
0
240
Drupal8 State API と Configuration API
kazukomurata
0
260
Drupal8 2016/11
kazukomurata
0
65
Other Decks in Programming
See All in Programming
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
CSC307 Lecture 05
javiergs
PRO
0
210
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 11
javiergs
PRO
0
240
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
最近追加した型の紹介とその振り返り
aki19035vc
0
170
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Temporalを取り巻く仕様を整理する
sajikix
0
110
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Building Applications with DynamoDB
mza
89
5.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
The Invisible Side of Design
smashingmag
294
50k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Facilitating Awesome Meetings
lara
46
5.8k
Happy Clients
brianwarren
94
6.5k
It's Worth the Effort
3n
181
27k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Music & Morning Musume
bryan
43
5.9k
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