Cherry Markdown主题切换回调函数配置指南

问题背景

在使用Cherry Markdown编辑器时，开发者经常需要监听主题切换事件以实现自定义逻辑。近期有开发者反馈，按照官方文档配置的setTheme和setCodeBlockTheme回调函数无法正常工作，而实际上应该使用changeMainTheme和changeCodeBlockTheme这两个回调函数。

正确的回调函数配置

在Cherry Markdown编辑器中，主题切换相关的回调函数应该这样配置：

const cherryInstance = new Cherry({
  // 其他配置项...
  callback: {
    changeMainTheme: (theme) => {
      console.log('主主题已切换为:', theme);
      // 这里可以添加自定义逻辑
    },
    changeCodeBlockTheme: (theme) => {
      console.log('代码块主题已切换为:', theme);
      // 这里可以添加自定义逻辑
    }
  }
});

回调函数详解

changeMainTheme

当用户切换编辑器主主题时触发此回调函数。该函数接收一个参数：

• theme (String): 表示切换后的主题名称

典型应用场景：

• 同步更新页面其他UI元素的主题
• 将用户选择的主题保存到本地存储
• 根据主题变化调整编辑器布局

changeCodeBlockTheme

当用户切换代码块主题时触发此回调函数。该函数接收一个参数：

• theme (String): 表示切换后的代码块主题名称

典型应用场景：

• 保持代码块主题与主主题的一致性
• 针对特定代码块主题应用自定义样式
• 记录用户的代码主题偏好

常见问题解决方案

1. 回调函数不触发：

   • 确保使用的是正确的回调函数名称
   • 检查Cherry Markdown版本是否为最新
   • 确认回调函数配置在正确的配置对象中

2. 主题切换延迟：

   • 回调函数中避免执行耗时操作
   • 考虑使用异步处理复杂逻辑

3. 多主题兼容问题：

   • 在回调函数中添加主题兼容性检查
   • 为不支持的主题提供回退方案

最佳实践建议

1. 主题状态持久化： 建议在回调函数中将用户选择的主题保存到localStorage或服务器，以便下次访问时保持一致性。

2. 主题切换动画： 可以在回调函数中添加平滑的过渡动画，提升用户体验。

3. 主题验证： 在回调函数中对主题进行验证，确保只应用有效的主题。

4. 性能优化： 对于复杂的主题切换逻辑，考虑使用防抖技术避免频繁操作。

通过正确配置和使用这些回调函数，开发者可以更好地控制Cherry Markdown编辑器的主题切换行为，实现更丰富的自定义功能。