Cherry Markdown多实例场景下usePlugin的正确使用方式

在基于Cherry Markdown编辑器开发时，开发者可能会遇到一个典型问题：当页面中存在多个编辑器实例时，使用usePlugin加载mermaid插件会出现报错提示"The function usePlugin should be called before Cherry is instantiated"，而单实例情况下却能正常工作。这种现象背后其实隐藏着插件系统的设计原理和使用规范。

插件系统的初始化机制

Cherry Markdown的插件系统采用全局注册模式，这意味着：

1. 所有插件只需要在应用生命周期内注册一次
2. 注册操作必须在所有编辑器实例初始化之前完成
3. 插件注册后会被所有后续创建的编辑器实例共享

这种设计避免了重复注册带来的性能开销，也确保了插件在不同实例间的行为一致性。

多实例场景的正确实践

在需要创建多个编辑器实例的场景下，正确的做法是：

// 全局一次性注册插件
if (window.mermaid) {
    Cherry.usePlugin(mermaidPlugin, {
        mermaid: window.mermaid
    });
}

// 然后初始化各个编辑器实例
const editor1 = new Cherry({ /* 配置1 */ });
const editor2 = new Cherry({ /* 配置2 */ });

常见误区解析

开发者容易犯的几个错误：

1. 重复注册：在每个实例初始化前都调用usePlugin
2. 时序错误：在实例化后才尝试注册插件
3. 条件判断不当：在动态加载场景下未处理好插件依赖

最佳实践建议

1. 将插件注册代码放在应用初始化阶段
2. 使用Promise或async/await确保异步依赖加载完成
3. 对于mermaid这类可能有CDN加载延迟的插件，建议：

// 确保mermaid加载完成后注册
window.mermaid?.initialize && Cherry.usePlugin(mermaidPlugin, {
    mermaid: window.mermaid
});

理解这些原理后，开发者就能在各种复杂场景下正确使用Cherry Markdown的插件系统了。