Cherry Markdown 中 Drawio 插件的窗口样式自定义指南

在 Vue 项目中使用 Cherry Markdown 编辑器时，开发者可能会遇到 Drawio 插件窗口样式不符合预期的问题。本文将详细介绍如何通过 CSS 配置来自定义 Drawio 插件的窗口样式，确保其在项目中能够正确显示。

问题背景

当开发者将 Drawio 相关文件（如 drawio_demo.html）移动到项目中的不同位置并修改路径后，可能会发现 Drawio 插件的窗口无法填满整个可用空间。通过浏览器开发者工具检查可以发现，这是由于 iframe 元素的样式设置不当导致的。

解决方案

Cherry Markdown 从 v0.8.46 版本开始，为 Drawio 插件增加了 cssText 配置项，允许开发者自定义 iframe 的样式。这个功能特别适合需要调整 Drawio 插件窗口显示效果的场景。

配置方法

要自定义 Drawio 插件的窗口样式，可以在初始化 Cherry Markdown 编辑器时，通过以下方式进行配置：

const editor = new Cherry({
  // 其他配置项...
  externals: {
    drawio: {
      cssText: 'height: 100%; width: 100%;' // 自定义样式
    }
  }
});

实际应用

在实际项目中，开发者可以根据需要调整以下样式属性：

1. 尺寸控制：通过 width 和 height 属性确保插件填满容器
2. 边框样式：使用 border 属性自定义窗口边框
3. 背景颜色：通过 background 属性调整背景色
4. 滚动行为：使用 overflow 属性控制滚动条显示

最佳实践

1. 响应式设计：考虑使用百分比单位而非固定像素值，确保在不同屏幕尺寸下都能正常显示
2. 样式继承：注意 iframe 内元素的样式可能需要单独设置，因为它们不会继承外部页面的样式
3. 测试验证：在修改样式后，应在不同浏览器和设备上进行测试，确保显示效果一致

版本兼容性

此功能自 Cherry Markdown v0.8.46 版本开始提供。如果使用的是较早版本，建议升级到最新版本以获得更好的功能和稳定性。

通过以上配置，开发者可以轻松解决 Drawio 插件窗口样式不符合预期的问题，并根据项目需求进行个性化定制，提升编辑器的整体用户体验。