CKEditor | Modules Unraveled

141 Using the Wysiwyg Fields Module to Use any Field Type as a CKEditor Plugin with Stuart Clark - Modules Unraveled Podcast

Photo of Stuart Clark

Wysiwyg Fields

  • What is the Wysiwyg Fields module?
    • Discussed three years ago on episode 35… Finally a stable release :|
  • Why did it take so long to release a stable?
    • Life
  • What’s new since we talked about it last time?
    • Re-architected, focusing on splitting out major components into separate modules for re-usability and sustainability:
      • Field Tokens
      • Token replace AJAX
    • As well as leveraging existing modules insto to re-inventing the wheel:
      • Icon API
      • Token filter
    • Now based on CKEditor module instead of Wyswiyg API module.
    • Beta release available and it works!
  • What types of fields can be used?
  • Is the field still a separate field, but just inserted into the wysiwyg field? (So, if I were to disable the module would it be outside the wysiwyg text area?)
  • Can you use something like Panels to display the field in another region?
  • What kind of control do we have over the output of the field? Can it be styled and positioned with css? Or is it fully controlled by the content editor when they create the content?
  • Does this integrate with the Quick Edit module to provide the quick edit feature like Drupal 8?
  • How does this relate to Media or Scald?

Use Cases

  • Insert Images:
    • Using ImageField widget
    • Using Media widget
    • Using Picture formatter for responsive images
  • Insert Text
    • For quotes that can be referenced via a View
    • For headlines that can be used in a ToC view embedded in a region on the same page
  • Insert Entity Reference
    • Insert user inside a form
  • Insert scald atom with atom reference field.
  • Insert youtube field
  • Insert Embedded Tweets with a textfield and a Custom Formatter.
  • Insert multiple field items at once
  • Insert all the fields
  • Paragraphs?
  • Use with Custom Formatters to allow updating formatting without need of re-editing content (Adjust Picture responsive image styles on redesign, etc).
  • Newspaper site
    • Ad - Entity Reference field. Then select which ad, and which view mode.
      • Every time the ad is updated (image) it’s updated everywhere it’s displayed inline
    • Views - List events related to that content.
    • Table Field - Tabular data

Questions from Twitter

  • Jarkko Oksanen
    Is there an example video somewhere online we can see the functionality?