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
350
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
230
Drupal8 Migrate API
kazukomurata
0
260
Drupal8 Problem of multilingualization of contents
kazukomurata
0
76
Drupalのデモサイト作って明日までに!と言われたら
kazukomurata
0
600
Drupal7 & 8 翻訳コンテンツの罠
kazukomurata
0
250
Drupal7×Cloudfront×SSL
kazukomurata
0
230
Drupal8 State API と Configuration API
kazukomurata
0
250
Drupal8 2016/11
kazukomurata
0
63
Other Decks in Programming
See All in Programming
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Try creating your own orderedmap
kazamori
1
170
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Hanami and htmx
bkuhlmann
0
220
Domain-Driven Transformation
hschwentner
2
1.5k
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
510
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
720
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Designing Experiences People Love
moore
136
23k
Thoughts on Productivity
jonyablonski
60
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
What's in a price? How to price your products and services
michaelherold
238
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Scaling GitHub
holman
457
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
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