能否像嵌入媒体一样将CodePen嵌入CKEditor5？

我之前踩过这个坑，给你几个关键解决步骤：

• 配置CKEditor5的Embed插件
  先确保你的CKEditor5实例安装了@ckeditor/ckeditor5-embed插件，然后在编辑器配置里把CodePen加入允许的嵌入来源，自定义解析逻辑：

  ClassicEditor
    .create( document.querySelector( '#editor' ), {
      embed: {
        providers: [
          {
            name: 'codepen',
            url: /^https?:\/\/codepen\.io\/([\w\d]+)\/pen\/([\w\d]+)/,
            html: match => {
              return `<iframe height="300" style="width: 100%;" scrolling="no" title="${match[2]}" src="https://codepen.io/${match[1]}/embed/${match[2]}?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href="https://codepen.io/${match[1]}/pen/${match[2]}">${match[2]}</a> by ${match[1]} (@${match[1]}) on CodePen.
              </iframe>`;
            }
          }
        ]
      }
    } )
  

  这样编辑器就能自动识别CodePen链接并渲染成对应的iframe。

• 调整Strapi的内容过滤规则
  Strapi默认的sanitize-html配置会过滤iframe标签，你需要修改config/plugins.js里的CKEditor配置，允许iframe及相关属性：

  module.exports = {
    'ckeditor': {
      enabled: true,
      config: {
        editor: {
          sanitize: {
            allowedTags: [...defaultAllowedTags, 'iframe'],
            allowedAttributes: {
              iframe: ['src', 'height', 'width', 'scrolling', 'title', 'frameborder', 'loading', 'allowtransparency', 'allowfullscreen', 'style']
            }
          }
        }
      }
    }
  };
  

  要把iframe需要的所有属性都加到允许列表，避免被过滤丢失。

• 验证前端渲染逻辑
  内容保存后，前端渲染时要确保不二次过滤Strapi返回的HTML，直接用对应框架的原始HTML渲染方式（比如React的dangerouslySetInnerHTML、Vue的v-html）。

如果用的是Strapi官方的CKEditor5可视化插件，也可以直接在插件配置面板里添加Embed插件并配置CodePen来源，不用手写代码。

内容的提问来源于stack exchange，提问作者Ali