CKEditor – for site builders/developers – Drupal 7 vs. Drupal 8

View Github Repository Open presentation in a new window

wimleers

See all presentation from wimleers

CKEditor – for site builders/developers – Drupal 7 vs. Drupal 8

0 0

talk-ckeditor-drupal-8-qa

Introductory slides for https://prague2013.drupal.org/bof/ckeditor-site-builders-qa-ckeditor-developers & https://prague2013.drupal.org/bof/ckeditor-developers-qa-ckeditor-developers — feel free to reuse this in your blogs/talks!

On Github wimleers / talk-ckeditor-drupal-8-qa

CKEditor

for site builders/developers

Q&A with the CKEditor developers!

@ckeditor + @wimleers

Agenda

1. Demo  

Drupal 7 vs. Drupal 8 Configuring CKEditor ACF (Advanced Content Filter) Image uploading/alignment/captions … Structured content: CKE captioned image widget Site-specific styles The technical possibilities

2. Q&A

1. Demo

Drupal 7 vs. Drupal 8

Two choices:

  • WYSIWYG module (manually download editor)
  • CKEditor module (editor-specific module)

Poor configuration UX in both cases

Configuring CKEditor

  • Text Editor vs. WYSIWYG module
  • Great UX
  • Filter settings automatically updated!

Advanced Content Filter (ACF)

  • No more crappy HTML!
  • Manually, CKEditor buttons, paste: no matter
  • CKE plugin metadata: required & allowed HTML

Image uploading/alignment/captions

  • Uploading integrated, enables image browsing in contrib
  • Image captions

Structured content: CKE captioned image widget

  • Caption filter: data-caption & data-align
  • CKEditor Widget transforms this on-the-fly

WordPress 3.6.1

[caption id="" align="aligncenter" width="55"]<img class="size-full wp-image " id="i-10" alt="Description." src="http://foobar.com/2013/09/dark.png?w=55" width="55" height="50">This is my caption![/caption]

Drupal 8

<img alt="Description." data-align="center" data-caption="This is my caption!" data-editor-file-uuid="5e36c57e-0780-4914-b300-0be49aa7cfa6" height="59" src="http://foobar.com/sites/default/files/inline-images/dark.png" width="65">

Site-specific styles

  • Anything you want
  • CSS in theme, only class attributes in HTML

The technical possibilities

  • Add more plugins:
  • ckeditor.com/addons/plugins, or
  • Custom plugins: Drupal.ckeditor.openDialog()
  • Write Drupal plugin: CKEditorPluginInterface
  • Amazing possibilities with CKE Widgets! e.g.: MathJax

2. Q&A

wimleers.com/talk/ckeditor-drupal-8-qa → slides on GitHub, feel free to reuse in your blogs & talks!