Skip to main content

Upload media inline in WYSIWYG editor in modern Drupal 10+ with CKEditor5

From a new Drutopia member and Agaric consulting client:

My last question of the day I think. Thanks for all your help!

I've been trying to understand the interaction between the media library and using photos within text on pages. If I upload a photo to the media library, I cannot figure out how to embed it in a text block. And vice versa, if I use the text editor to add a photo, I can get it to wrap with text but it won't show up in the media library.

It seems like the best practice is that we should try to use the media manager rather than just drop in photos using the text editor method (which doesn't seem to get the photos into the media library), but how do we get the photos in the media library to be able to wrap with text and not be visually separate content?

(The help pages I've found on this issue seem outdated, other than the useful observation "Key to this issue [of overlapping media management systems] is that Drupal ships with several features that are similar to Media. The ability to upload files and images is not replaced by Media, but rather supplemented. This means that the user is left with both options (if not more) and must somehow know which one is the built in (not to be used), and new (preferred method)." at https://www.drupal.org/docs/7/modules/media/media-2x-quick-start-guide )

We wrote back:

Hi!

You are absolutely right that "This all seems to be an overwhelmingly large number of difficult steps just to have an image browser with the editor", as a comment you might have run across put it.

But a large part of the reason why you are running into confusing instructions is that modern Drupal has it all in core and it is significantly easier! That's why there are so many old posts, including from Drupal 7 but also from modern Drupal before Media Library went into core at some point in Drupal 8, and no clear explanation of how things should be done now in Drupal 10 which now has CKEditor5 replacing CKEditor4 in core.

As long as Media and Media Library modules are installed, "all" you need to do is:

  • Go to Administration » Configuration » Content authoring » Text formats and editors: https://experienceolympic-test.drutopia.org/admin/config/content/formats
  • Press Configure on the relevant text format (/admin/config/content/formats/manage/basic_html)
  • Drag the Media Library icon (/core/modules/ckeditor5/icons/medialibrary.svg) from Available buttons into the Active toolbar.

And that is how you are able to insert from your media library in CKEditor5 (or add to your media library while inserting a new image with your CKEditor WYSIWYG) in Drupal 8, 9, 10, 11 and probably 12 and onward too!

We are making this the default behavior in Drutopia as we continually upgrade it with Drupal's latest features and its own unique improvements.

Drupal

Comments

Add new comment

The content of this field is kept private and will not be shown publicly.

Markdown

The comment language code.
CAPTCHA Please help us focus on people and not spambots by answering this question.