embedded_content

The Embedded Content module was formerly known as the Ckeditor5 Embedded Content module and has been renamed to be more future proof and easier to find.

Demo

View Demo

The demo is still the demo for the Ckeditor5 Embedded Content module (version 1) but it will give you an idea anyway

Features

• Insert themed content in Ckeditor5 using Drupal plugins without having to write rich HTML and CSS
• Rendered result is shown directly in the CKEditor (thank you Upcasting)
• Theming is disconnected from user input and can be updated independently.
• Content doesn't live outside the text field.
• Create 'inline' embedded content that sits inline with the text, like footnotes.
• Create custom buttons for different collections of Embedded Content plugins
• Allow Embedded Content modals to open in an Off Canvas modal
• Works out of the box with multiple modals when the core patch from https://www.drupal.org/project/drupal/issues/2741877 has been applied

How to enable

1. Install using composer require drupal/embedded_content
2. Enable embedded_content module.
3. Enable Ckeditor5 for an editor and drag the default 'Embedded Content' icon into the toolbar.
4. Enable the 'embedded content' filter
5. Create an 'EmbeddedContent' plugin. Check composer require 'drupal/embedded_content_examples-embedded_content_examples:^2.0' for examples. (see https://www.drupal.org/project/embedded_content_examples/issues/3478794)
6. Use the button on the toolbar
7. Create custom buttons for specific sets of Embedded Content in /admin/config/content/embedded-content/button

How it works

• Similar to core's Media implementation, A new HTML component < embedded-content > is inserted into the textfield, with 'data-plugin-id' and 'data-plugin-config' attributes.
• A Ckeditor5 plugin upcasts it to rendered content using the ::build() method on the EmbeddedContent plugin
• A filter plugin applies the same method for the rendered result.
• Contrary to Media or Entity embed, there is no reference to data stored elsewhere. All the configuration is stored in the same text field.

Why use it?

This module might be suitable for those who want to:

• Embed call to action buttons with icons, attributes for data tracking, different styling options etc.
• Create embed code for social media, such as twitter, instagram.
• Embed highlighted sections in an article.

Extending Embedded Content

Please checkout the following extensions

• Embedded Content: Examples for examples of how to build your own plugins.
• Embedded Content: Entity for embedding content entities
• Embedded Content: SDC for single directory components (under development)

Caveat: multiple modals

Drupal cannot deal with multiple modals. This will become an issue if you use For example a Media Library browser inside a textfield that is provided by a Embedded Content plugin. There is a core patch in https://www.drupal.org/project/drupal/issues/2741877 that fixes this. I've decided to already incorporate this fix in this module, so the module should work with and without this core patch.