- 🇧🇷Brazil andre.bonon
This feature request is still relevant. I’ve re-targeted the issue to the 8.x-1.x-dev branch.
I plan to submit a merge request with the feature in my next contribution. - Merge request !18Issue #2848138: Adds support to ckeditor media preview. → (Open) created by andre.bonon
- 🇧🇷Brazil andre.bonon
Adding the patch file that could be used with composer.
- 🇧🇷Brazil andre.bonon
Test steps
-
Enable Required Modules
Ensure the following modules are enabled:- - Media
- - Media Library
- - CKEditor
- - Plyr
-
Configure the Media Type
- - Go to Structure > Media types > Remote video > Manage display.
- - For the Default display mode, set the Video URL field (or equivalent) to use the Plyr formatter.
- - Save the configuration.
-
Configure Text Format for CKEditor
- - Go to Configuration > Content authoring > Text formats and editors.
- - Edit the text format used by your content type (e.g., Full HTML or Basic HTML).
- - Under Enabled filters, ensure the Embed media is enabled
- - Under Editor settings, make sure the Insert media button is added to the CKEditor toolbar.
- - Save the configuration.
-
Test Embedding a Remote Video via CKEditor
- - Go to Content > Add content and select a content type that includes a Body field (e.g., Article).
- -In the Body field, verify that the Insert media icon is visible in the CKEditor toolbar.
- - Click the Insert media icon.
- - In the media library modal, select an existing Remote video media item or create a new one using a valid YouTube or Vimeo URL.
- - Insert the media into the editor.
- - Verify that the video preview is rendered inline within the CKEditor (not just a placeholder).
- - Save the content.
- - On the front-end, confirm that the video is rendered using the Plyr player
-
Test Embedding a Remote Video via CKEditor inside Layout Builder Modal
- - Ensure that Layout Builder and Layout Builder Modal are enabled
- - Go to Structure > Content types > [Your Content Type] > Manage display.
- - Enable Layout Builder for the content type. Enable the "Allow each content item to have its layout customized" option.
- - Create or edit a node of that content type and click Layout
- - In the Layout Builder interface, click Add block and choose a Basic block that contains a Body field using CKEditor.
- - In the Layout Builder Modal that opens, locate the Body field and ensure the Insert media icon is present in the CKEditor toolbar.
- - Click the Insert media icon.
- - Select an existing Remote video media item or create a new one using a valid YouTube or Vimeo URL via the media library modal.
- - Insert the media item into the editor.
- - Verify that the video preview is rendered inline within the CKEditor (not as a token or placeholder).
- - Click Update and then Save Layout.
- - View the node and confirm that the video is rendered using the Plyr player as expected.
-
Enable Required Modules