Laravel集成Vue环境下GrapeJs编辑器图标点击事件无法触发问题

以下是导致功能失效的核心原因及修复方式：

• 语法逻辑错误：this.editor.command("open-blocks") 写在了grapesjs.init()的配置对象内部，属于非法的对象属性写法，JS执行到此处会直接抛出异常，编辑器事件绑定逻辑会中断。且GrapesJS触发命令的正确方法为execCommand，原方法名书写错误。
• 导入命名拼写错误：你导入grapesjs-preset-webpage时将变量命名为greapejspreset，拼写错误会导致插件加载失败，对应功能的事件绑定也会失效。
• 响应式劫持问题：你把editor实例放在了data中，data内的变量会被Vue做递归响应式劫持，GrapesJS内部挂载的DOM、事件回调会被代理破坏，直接导致点击事件触发异常。
• 容器选择器风险：用字符串#gjs作为容器标识，Vue编译阶段可能出现DOM标识变动，导致编辑器容器识别错误。

修复后完整代码 #

<template>
  <div class="base">
    <!-- 用ref替代id选择器，精准获取DOM节点 -->
    <div ref="gjsContainer">
      <h1>Hello World Component!</h1>
    </div>
  </div>
</template>

<script>
import grapesjs from "grapesjs";
// 修正拼写错误
import grapesjsPresetWebpage from "grapesjs-preset-webpage";
export default {
  mounted() {
    const editor = grapesjs.init({
      // 直接传入真实DOM节点，避免选择器匹配异常
      container: this.$refs.gjsContainer,
      fromElement: true,
      height: "1000px",
      width: "auto",
      storageManager: false,
      cssIcons: null,
      plugins: [
        grapesjsPresetWebpage
      ]
    });
    // 移到init方法外部执行，修正命令调用方法名
    editor.execCommand("open-blocks");
    // 若后续需要调用editor实例，直接挂载到组件实例即可，不要放入data
    this.editor = editor;
  },
  // 组件销毁时主动销毁编辑器实例，避免内存泄漏
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  }
};
</script>

补充验证步骤 #

• 优先打开浏览器控制台清除所有JS报错后再验证功能
• 若仍存在点击无响应情况，可给GrapesJS容器添加@click.stop修饰符，避免Vue全局事件委托的干扰

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