Check out the codepen module for embedding code samples.
View Codepen Embed Field on Drupal.orgCodepen Embed Field
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.
View on Drupal.org #3496793Support WYSIWYG embedding Status: Needs review
Url Embed module works out of the box.
View URL Embed on Drupal.orgURL Embed
Gutenberg can also handle oEmbed.
View Gutenberg on Drupal.orgGutenberg
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.
View Iframe on Drupal.orgIframe
iFrame Media Video Embed might work for non video iframes.
View Iframe Media Embed Video on Drupal.orgIframe Media Embed Video
CKEditor iFrame
View CKEditor iFrame on Drupal.orgCKEditor iFrame
Issue with extra attributes: View on GitLab #3496871Additional attributes get stripped Status: Needs review
FitVids might help, says it works with iframes.
View FitVids on Drupal.orgFitVids
Wrapper for a jquery script last updated 9 years ago.
CKEditor HTML Embed, kind of like CKEditor 5 Template, but editable html.
View CKEditor5 HTML Embed on Drupal.orgCKEditor5 HTML Embed
Media: Embeddable
View Media: Embeddable on Drupal.orgMedia: Embeddable
Add iframes/scripts/html? as media items.
Works pretty well.
Issue with seeing embed as full width in editor.
View Embedded Content on Drupal.orgEmbedded Content.
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
View Link iframe formatter on Drupal.orgLink iframe formatter
Field formatter, no wysiwyg.
Embera
View Embera on Drupal.orgEmbera
Wrapper for https://github.com/mpratt/Embera
Doesn't seem to provide customization via UI.
Additional modules:
View Media oEmbed Provider Markup on Drupal.orgMedia oEmbed Provider Markup
View Lazy-load on Drupal.orgLazy-load
View Extended HTML Filter on Drupal.orgExtended HTML Filter
View iFrame Resizer on Drupal.orgiFrame Resizer
View Embederator on Drupal.orgEmbederator
View Media entity inline frame (media_iframe) on Drupal.orgMedia entity inline frame (media_iframe)
View OEmbed Lazyload on Drupal.orgOEmbed Lazyload
View Media entity inline frame (media_iframe) on Drupal.orgMedia entity inline frame (media_iframe)
View Entity media embed code on Drupal.orgEntity 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?