Drupal 7

☹

https://www.flickr.com/photos/donnieray/10584676434

Drupal 7

• Contributed modules: WYSIWYG and CKEditor
• Together 575 000 installations in Drupal 7
• Awesome! But...

• Research

  • Which module to use?
  • Which editor to use?
  • What distribution of editor to use?
• Installation, testing, configuration
• Maintenance (updating, etc.)

...and

Popular WTFs

• Images are lost after saving node (CKEditor Toolbar vs. Text format configuration mismatch)
• Confusion: installed CKEditor module but need to download CKEditor (the editor)? o_O

Drupal 8

• Select text editor straight in "Text formats and editors" administration page
• Drag & drop toolbar configurator for CKEditor
• HTML filter settings automatically updated
• Nice API for registering additional CKEditor plugins, enhancing CKEditor configuration form

Demo #1

How CKEditor toolbar configuration triggers an automatic update of Allowed HTML tags list

Demo #2

How automatic update of Allowed HTML tags list works when buttons (features) are removed

ACF (Advanced Content Filter)

ACF strips unwanted content

Source: Miami-Dade Police Department

ACF (Advanced Content Filter)

• Everything that is not allowed is removed
• Works also when pasting content – WYSIWYG!

  No need to submit form and wait for the server-side filter to remove disallowed tags to see the final markup

• Smart (transformations - stripping tags, not content)

Switching text formats? Remember about ACF

Demo #3

Live example of how ACF works on different text formats

Editing possibilities

• Classic editor
• Inline editor

Administration backend

"Classic" editor

• <iframe> – based
• CSS-styles are not inherited from admin theme
• Themes may register dedicated stylesheet for CKEditor through an entry in their .info file:

ckeditor_stylesheets:
    - css/ckeditor-iframe.css

Classic editor in action, note the CSS styles in WYSIWYG area:

Quick editing

"Inline" editor

• No <iframe>!
• CSS-styles are inherited; the content looks exactly the same both in editor and on website.
• Real WYSIWYG, finally!

Handy quick edit option in Drupal 8:

Editing node using quick edit feature:

Note that CSS styles did not change!

Styling content

• CSS style definitions set in themes' CSS files
• Selected style definitions (using CSS classes) available in Styles dropdown list
• Separate: semantic markup and visual presentation
• Handy: consistent styling, less work overall

Inline styles?

How to enable Text/Background Color buttons in Drupal 8?

• CKEditor in Drupal Core != CKEditor "Full" preset
• But... additional plugins might be added!

  

Enabled Color buttons in Full HTML text format:

http://angels-heaven.org

Widgets vs Templates

Templates

• HTML snippets that behave like normal HTML after being pasted into editor.
• No control – easy to break, delete part of the content.
• No Drag & Drop support.
• By default not available in Drupal 8^*.

* Any plugin that inserts complicated HTML structure suffers from the same issues as the template plugin.

Templates in action

Sample template

Common issues

Solution?

Widgets!

• Select, copy, paste and delete as a whole.
• Drag and drop as a whole.
• Editable parts (with separate ACF rules!).
• Upcasting & downcasting to a simpler data format.
• Common dialog, context menu. Consistent look and feel.
• Perfect UX. Bulletproof. Powerful.

Simple Box Widget

Tutorial: Creating CKEditor Widget

Video #4

New Image Plugin in Drupal

Downcasted image

"Data" form saved in a database:

<img alt="JavaScript Logo"
     data-align="right"
     data-caption="JavaScript Logo"
     data-editor-file-uuid="8025f271-1db8-45cb-9400-f166c4683495"
     height="220"
     src="/sites/default/files/inline-images/JavaScript-logo.png"
     width="220" />

Upcasted image:

<div class="align-right cke_widget_block ..." contenteditable="false">
  --------------------------------------------------------------------
  <figure class="caption caption-img" data-widget="image" ... >
      <img alt="JavaScript Logo"
           height="220"
           src="/sites/default/files/inline-images/JavaScript-logo.png"
           width="220" >
      <figcaption contenteditable="true">JavaScript Logo</figcaption>
  </figure>
  --------------------------------------------------------------------
  <span class="cke_widget_drag_handler_container ...">...</span>
</div>

FilterCaption

FilterCaption filter in Drupal scans for images with data-caption attribute and wraps them with:

<figure class="caption caption-img {{ classes }}">
    {{ img }}
    <figcaption>{{ caption }}</figcaption>
</figure>

MathJax

Code Snippet

Chart

Adding new plugins

• CKEditor Addons repository:

  http://ckeditor.com/addons/plugins/all

• Your own plugins:

  • CKEditor Plugin SDK (tutorials!)
  • CKEditor Widget SDK (tutorials!)

CKEditorPluginInterface

(any plugin must implement)

• getDependencies(Editor $editor)

  An array of required CKEditor plugins

• getFile()

  Path to plugin.js

• getConfig(Editor $editor)

  Configuration settings

CKEditorPluginButtonsInterface

(for plugins with toolbar buttons)

• getButtons() An array of buttons*

  • – label
  • – image, image_rtl (icons)
  • ...

* list is used only in the administration backend.

CKEditorPluginConfigurableInterface

(if you wish to provide settings form)

settingsForm(array $form, ..., Editor $editor);

CKEditorPluginContextualInterface

(for plugins enabled under certain conditions)

• isEnabled(Editor $editor)

Namespace Drupal\ckeditor

• CKEditorPluginInterface

  Example: Panel Button

• CKEditorPluginButtonsInterface

  Example: Color Button

• CKEditorPluginConfigurableInterface

  Example: Styles Combo

• CKEditorPluginContextualInterface

  Example: List Style

Custom Configuration

Simple Hook

hook_editor_js_settings_alter(array &$settings)

• Allows setting any configuration option.

• Including CKEditor skin:

  Moono Color
  a sample module with a skin for CKEditor in Drupal 8.