CKEditor

for site builders/developers

Q&A with the CKEditor developers!

@ckeditor + @wimleers

Agenda

1. Demo  

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

2. Q&A

1. Demo

Drupal 7 vs. Drupal 8

  1. Two choices:

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

  2. 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"]Description.This is my caption![/caption]

Drupal 8

Description.

Site-specific styles

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

The technical possibilities

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

Show DrupalImage & DrupalImageCaption!

2. Q&A

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