如何在GrapeJS编辑器中添加Iframe Block？

错误根源 #

你碰到的TypeError: m.render is not a function，核心原因是官方FrameComponent对应的type是frame，不是iframe，直接指定type为iframe会导致编辑器找不到对应的渲染逻辑。

具体实现步骤 #

1. 配置Iframe组件（基于官方FrameComponent）

你可以直接复用官方的frame组件，也可以扩展出自定义的iframe组件，两种方式如下：

方式一：直接复用官方frame组件

const editor = grapesjs.init({
  container: '#gjs',
  // 其他编辑器配置...
});

方式二：扩展自定义iframe组件（可选，用于自定义默认属性）

const editor = grapesjs.init({
  container: '#gjs',
  // 其他编辑器配置...
});

const FrameComponent = editor.Components.getType('frame');
editor.Components.add('custom-iframe', {
  extend: 'frame',
  model: {
    defaults: {
      src: 'https://example.com',
      width: '100%',
      height: '400px',
      frameborder: '0',
      allowfullscreen: true,
      traits: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
    },
  },
});

2. 添加Iframe块到编辑器

根据上面的组件配置，添加对应的Block：

如果用官方frame组件

editor.BlockManager.add('iframe-block', {
  label: 'Iframe',
  category: 'Media',
  content: {
    type: 'frame',
    src: 'https://example.com',
    width: '100%',
    height: '400px',
    frameborder: '0',
  },
});

如果用自定义的custom-iframe组件

editor.BlockManager.add('iframe-block', {
  label: 'Iframe',
  category: 'Media',
  content: {
    type: 'custom-iframe',
  },
});

更简单的方式：直接用HTML字符串
不需要额外配置组件，直接传入iframe的HTML代码，GrapeJS会自动解析为FrameComponent：

editor.BlockManager.add('iframe-block', {
  label: 'Iframe',
  category: 'Media',
  content: '<iframe src="https://example.com" width="100%" height="400px" frameborder="0" allowfullscreen></iframe>',
});

额外提示 #

• 放弃旧版本的SO方案和不兼容的grapesjs-blocks-avance插件，直接基于官方FrameComponent实现更稳定
• 确保你的GrapeJS是最新稳定版，避免版本兼容问题

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