Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Drupal8 CKEditor TIps
kazukomurata
August 30, 2017
Programming
0
230
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
140
Drupal8 Migrate API
kazukomurata
0
150
Drupal8 Problem of multilingualization of contents
kazukomurata
0
49
Drupalのデモサイト作って明日までに!と言われたら
kazukomurata
0
340
Drupal7 & 8 翻訳コンテンツの罠
kazukomurata
0
210
Drupal7×Cloudfront×SSL
kazukomurata
0
160
Drupal8 State API と Configuration API
kazukomurata
0
190
Drupal8 2016/11
kazukomurata
0
37
Other Decks in Programming
See All in Programming
Quartoを使ってみませんか / quarto_get_started
s_uryu
0
110
UI State Modeling 어떤게 좋을까?
laco2951
1
220
roadmap to rust 2024
matsu7874
1
830
Reactでアプリケーションを構築する多様化
sakito
4
3.4k
byte列のbit表現を得るencodingライブラリ作った
convto
1
130
C言語でメモリ管理を考えた話
hkawai
0
190
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
110
Kueue入門/Kueue Introduction
bells17
0
510
Unity Localization で多言語対応実装しよう / xrdnk-yokohamaunity-lt10-20220513
xrdnk
0
130
Reinventing the wheel ... as a service
mariofusco
3
270
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
300
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
clockmaker
2
1.6k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
86
12k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Optimizing for Happiness
mojombo
365
63k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
910
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Designing Experiences People Love
moore
130
22k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Infographics Made Easy
chrislema
233
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
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