Cherry Markdown 中动态调用 draw.io 编辑器的技术方案

在 Cherry Markdown 编辑器的使用过程中，开发者可能会遇到需要动态调用 draw.io 编辑器的需求。本文将详细介绍几种实现方式，帮助开发者根据具体场景选择最适合的方案。

隐藏工具栏按钮方案

对于需要保留 draw.io 功能但又不希望显示工具栏按钮的场景，可以采用 CSS 隐藏方案：

span[title="draw.io"] {
  display: none;
}

这种方案的优点是实现简单，只需添加少量 CSS 代码即可。缺点是 draw.io 按钮仍然存在于 DOM 中，只是视觉上不可见。

最新版本隐藏工具栏机制

Cherry Markdown 的最新版本已经增加了专门的隐藏工具栏机制。开发者可以通过以下方式在工具栏配置中隐藏特定工具：

toolbar: [
  {
    name: 'drawIo',
    visible: false,  // 设置为 false 即可隐藏该工具
  },
  // 其他工具栏配置...
]

这种官方支持的方案更加规范和可靠，推荐在新项目中使用。它允许开发者完全控制工具栏的显示逻辑，同时保持 API 调用的能力。

API 调用方式

无论采用哪种隐藏方案，开发者都可以通过 Cherry Markdown 的 API 来调用 draw.io 编辑器：

cherryObj.toolbar.toolbarHandlers.drawIo();

这种调用方式与用户点击工具栏按钮的效果完全一致，确保了功能的一致性。

技术实现原理

在 Cherry Markdown 的内部实现中，工具栏工具和对应的功能处理器是解耦的。这意味着：

1. 工具配置主要控制界面显示
2. 功能处理器独立存在，可通过 API 调用
3. 隐藏工具不会影响底层功能的可用性

这种架构设计提供了良好的灵活性，使开发者可以根据需求选择界面呈现方式。

最佳实践建议

1. 对于新项目，建议使用官方提供的 visible: false 配置方式
2. 如需兼容旧版本，可采用 CSS 隐藏方案作为临时解决方案
3. 在调用 API 前，建议先检查处理器是否存在，避免运行时错误
4. 考虑用户体验，确保通过其他方式(如快捷键或自定义按钮)提供 draw.io 的访问入口

通过合理运用这些技术方案，开发者可以灵活地集成 draw.io 功能，同时保持界面的简洁性。