Check out the codepen module for embedding code samples.
https://www.drupal.org/project/codepen
Looks like it only provides a fields.
Mglaman has an article on how to embed codepens:
https://mglaman.dev/blog/adding-codepen-oembeds-your-drupal-site
I got WYSIWYG embeds working by adding Simple Oembed (soembed) and oEmbed Providers modules.
Add a Codepen provider bucket and select CodePen.
Check the option for "Simple oEmbed filter" in your text format.
Also select "Replace in-line URLs" - what does this do?
This code is still needed to add the ?format=json to the url.
function HOOK_oembed_resource_url_alter(array &$parsed_url, \Drupal\media\OEmbed\Provider $provider) {
if ($provider->getName() === 'CodePen') {
$parsed_url['query']['format'] = 'json';
}
}Height can be set in the hook as well.
$parsed_url['query']['height'] = '600';Max width can be set in the text format settings.
What's missing is a way to configure settings like default tab, theme, editable, etc.
https://blog.codepen.io/documentation/embedded-pens/
The editable feature is not available in oembed.
I created an issue for the Codepen module to add the hook.
https://www.drupal.org/project/codepen/issues/3496793
Url Embed module works out of the box.
https://www.drupal.org/project/url_embed
Gutenberg can also handle oEmbed.
https://www.drupal.org/project/gutenberg
CKEditor5 Template, CKEditor Templates UI
Can't create a form for variables, but can be used to add wrappers.
iFrame module doesn't have a CKE plugin.
https://www.drupal.org/project/iframe
iFrame Media Video Embed might work for non video iframes.
https://www.drupal.org/project/iframe_video
CKEditor iFrame
https://www.drupal.org/project/ckeditor_iframe
Issue with extra attributes: https://www.drupal.org/project/ckeditor_iframe/issues/3496871
FitVids might help, says it works with iframes.
https://www.drupal.org/project/fitvids
Wrapper for a jquery script last updated 9 years ago.
CKEditor HTML Embed, kind of like CKEditor 5 Template, but editable html.
https://www.drupal.org/project/ckeditor_html_embed
Media: Embeddable
https://www.drupal.org/project/media_embeddable
Add iframes/scripts/html? as media items.
Works pretty well.
Issue with seeing embed as full width in editor.
Insert templated content into CKEditor, with an edit form.
Since it is rendered in code (not stored as html in content), it can be updated programmatically.
To make a template for a Codepen embed, the the plugin could use oembed for the embed attributes.
Link iFrame Formatter
https://www.drupal.org/project/link_iframe_formatter
Field formatter, no wysiwyg.
Embera
https://www.drupal.org/project/embera
Wrapper for https://github.com/mpratt/Embera
Doesn't seem to provide customization via UI.
Additional modules:
https://www.drupal.org/project/media_oembed_provider_markup
https://www.drupal.org/project/lazy
https://www.drupal.org/project/extended_html_filter
https://www.drupal.org/project/iframe_resizer
https://www.drupal.org/project/embederator
https://www.drupal.org/project/media_iframe
https://www.drupal.org/project/oembed_lazyload
https://www.drupal.org/project/media_iframe
https://www.drupal.org/project/entity_media_embed_code
What I learned:
oEmbed is great for flexibility, but I'm more interested in good integration with Codepen here.
A form to edit parameters would be great.
Media Embeddable provides good customization and reuse, but you have to copy the embed code manually.
Embedded Content would be great, just need to implement a service to retrieve values from oembed, but use the regular embed code for more flexibility.
CKEditor Media Embed uses external services to handle oembed generically. I think there was a free one that fetched embed codes from oembed on save, but it doesn't seem to be working.
Simple oEmbed doesn't distinguish between links to codepen vs embeds. Can a custom provider be used instead to define a codepen:// url for embeds, or check the /api/oembed path?