如何禁用Editor.js排版行内工具点击外部时关闭Coloris颜色选择器弹出层？

我之前在给Editor.js开发自定义行内排版工具时，也踩过Coloris颜色选择器被意外关闭的坑，分享几个亲测有效的解决方案：

方案一：修改Coloris默认配置，禁用外部点击关闭 #

Coloris本身提供了控制外部点击关闭的配置项，你可以直接把closeOnClickOutside设为false，这样点击弹窗外部就不会自动关闭了。不过这种方式需要你额外处理弹窗的关闭逻辑（比如选色完成后自动关闭，或者加个关闭按钮）。

// 初始化Coloris时修改配置
Coloris({
  closeOnClickOutside: false,
  // 其他你需要的配置，比如定位方式、预设颜色等
});

// 可选：监听颜色选择完成事件，自动关闭弹窗
document.addEventListener('coloris:pick', () => {
  Coloris.close();
});

方案二：阻止Coloris弹窗的点击事件冒泡 #

问题的核心往往是Editor.js的行内工具监听了全局点击事件，点击外部时会触发关闭逻辑。我们可以让Coloris弹窗的点击事件不向上冒泡，这样Editor.js就不会感知到这次点击，也就不会触发关闭。

因为Coloris的弹窗是动态生成的，用事件委托更稳妥：

document.addEventListener('click', (e) => {
  // 检测点击目标是否在Coloris弹窗内部
  if (e.target.closest('.coloris-picker')) {
    e.stopPropagation();
  }
});

注意：不同版本的Coloris弹窗类名可能有变化，你可以打开浏览器开发者工具查看实际的弹窗容器类名，替换上面的.coloris-picker。

方案三：自定义Editor.js行内工具的关闭逻辑 #

如果你不想修改全局配置或事件，可以在自己的行内工具类里重写外部点击的判断逻辑，只有当点击既不在Coloris弹窗内，也不在工具按钮上时，才关闭弹窗。

class CustomColorInlineTool {
  constructor({ api }) {
    this.api = api;
    this.button = null;
    this.outsideClickHandler = this.handleOutsideClick.bind(this);
  }

  render() {
    this.button = document.createElement('button');
    this.button.innerHTML = '<svg>...</svg>'; // 你的工具图标
    this.button.addEventListener('click', () => this.toggleColorPicker());
    return this.button;
  }

  toggleColorPicker() {
    if (Coloris.isOpen()) {
      Coloris.close();
      document.removeEventListener('click', this.outsideClickHandler);
    } else {
      Coloris.show(this.button);
      document.addEventListener('click', this.outsideClickHandler);
    }
  }

  handleOutsideClick(e) {
    const colorPicker = document.querySelector('.coloris-picker');
    const isClickInsidePicker = colorPicker && colorPicker.contains(e.target);
    const isClickOnToolBtn = this.button.contains(e.target);

    if (!isClickInsidePicker && !isClickOnToolBtn) {
      Coloris.close();
      document.removeEventListener('click', this.outsideClickHandler);
    }
  }

  // 其他行内工具必须实现的方法（比如surround、checkState等）
}

这个方案更灵活，完全可控，也不会影响其他Editor.js工具的行为。

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