如何阻止GrapesJS移除img标签的onclick属性？

问题说明 #

我做了一个图片画廊，用JS实现点击缩略图展示功能，对应的img标签代码如下：

<img src="https://sampleimage.jpg" width="800" height="800" onclick="sendimg(this);"/>

但GrapesJS渲染时会自动移除onclick属性，保存页面后该属性丢失，最终代码变为：

<img src="https://sampleimage.jpg" width="800" height="800" />

页面其余内容的渲染与保存均正常，尝试添加data属性及自定义属性未被移除，仅onclick属性出现此问题。

我的GrapesJS初始化代码：

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  height: '800px',
  width: 'auto',
  storageManager: false,
  parseContent: true,
  selectorManager: { componentFirst: true }
});

已加载的插件：

plugins: [
  'gjs-blocks-basic',
  'grapesjs-plugin-forms',
  'grapesjs-component-countdown',
  'grapesjs-plugin-export',
  'grapesjs-tabs',
  'grapesjs-custom-code',
  'grapesjs-touch',
  'grapesjs-parser-postcss',
  'grapesjs-tooltip',
  'grapesjs-tui-image-editor',
  'grapesjs-typed',
  'grapesjs-style-bg',
  'grapesjs-preset-webpage',
  'grapesjs-style-gradient',
  'grapesjs-blocks-flexbox',
  'grapesjs-custom-code',
  'grapesjs-plugin-ckeditor',
],

解决办法 #

GrapesJS默认会过滤内联事件属性（如onclick），这是出于安全和编辑器规范的设计。以下是几种可行的解决方式：

1. 扩展图片组件的允许属性 #

通过修改图片组件的配置，将onclick加入允许的属性列表，确保编辑器不会过滤它：

const editor = grapesjs.init({
  // 保持原有初始化配置...
});

// 扩展图片组件
editor.DomComponents.addType('image', {
  model: {
    defaults: {
      // 声明允许onclick属性
      allowAttrs: ['onclick', 'src', 'width', 'height']
    }
  }
});

如果不想覆盖默认属性，也可以用concat追加：

const defaultImgAttrs = editor.DomComponents.getType('image').model.prototype.defaults.allowAttrs;
editor.DomComponents.addType('image', {
  model: {
    defaults: {
      allowAttrs: [...defaultImgAttrs, 'onclick']
    }
  }
});

2. 修改全局属性白名单 #

在初始化时直接配置全局允许的属性，一次性包含onclick：

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  height: '800px',
  width: 'auto',
  storageManager: false,
  parseContent: true,
  selectorManager: { componentFirst: true },
  // 添加全局属性配置
  config: {
    allowAttrs: ['onclick', 'id', 'class', 'src', 'width', 'height'] // 按需添加需要保留的属性
  }
});

3. 使用自定义代码组件 #

利用已加载的grapesjs-custom-code插件，直接插入包含onclick属性的完整img标签代码。自定义代码组件不会过滤内联事件属性，能完整保留你的代码。

4. 事件委托（推荐） #

从开发规范角度，更建议用事件委托替代内联onclick，这样既避开编辑器的属性过滤，也更易维护：
在页面的JS代码中添加事件委托逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 假设图片画廊的容器类名为gallery-container
  document.querySelector('.gallery-container').addEventListener('click', function(e) {
    if (e.target.tagName === 'IMG') {
      sendimg(e.target);
    }
  });
});

这种方式不需要依赖img标签的内联属性，即使GrapesJS修改标签内容，事件依然能正常触发。

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