咨询CodeEffects客户端编辑器新建规则选项的点击事件监听方案

方案一：利用CodeEffects内置的OnCommand事件 #

CodeEffects客户端编辑器原生提供了OnCommand事件，可捕获用户触发的各类编辑器命令，其中就包含「新建规则」操作对应的命令。你可以在初始化编辑器时绑定该事件，通过判断命令名称来处理点击逻辑：

// 初始化编辑器实例
const editor = new CodeEffects.RuleEditor("editorContainer", yourEditorOptions);
// 绑定命令监听事件
editor.onCommand = function(commandName) {
  // 匹配「新建规则」命令（不同版本可能命令名略有差异，需核对）
  if (commandName === "NewRule") {
    // 这里编写你的自定义处理逻辑
    console.log("用户触发了新建规则操作");
  }
};

方案二：手动绑定DOM点击事件 #

如果内置事件无法覆盖需求，也可以直接定位到页面上的「新建规则」按钮元素，手动添加点击事件监听：

1. 先通过浏览器开发者工具查看按钮的DOM选择器（比如特定class，示例假设为.ce-new-rule-btn）
2. 编写绑定逻辑，注意要确保编辑器已渲染完成后再执行：

// 延迟执行确保编辑器DOM已加载
setTimeout(() => {
  const newRuleBtns = document.querySelectorAll(".ce-new-rule-btn");
  newRuleBtns.forEach(btn => {
    btn.addEventListener("click", () => {
      // 自定义处理逻辑
      console.log("新建规则按钮被点击");
    });
  });
}, 500);

如果编辑器是动态渲染（比如异步加载后生成按钮），建议使用MutationObserver监听DOM变化，确保按钮出现时能自动绑定事件。

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