Cherry-Markdown 在 Vue3 中使用时图片插入导致光标位置报错问题解析

问题现象

在 Vue3 项目中集成 Cherry-Markdown 编辑器时，当文档中包含图片内容后，用户尝试通过点击切换光标位置时，控制台会抛出以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at If (cherry-markdown-7f1d788b.js:6:9586)
    at Dd (cherry-markdown-7f1d788b.js:6:10306)
    at b6 (cherry-markdown-7f1d788b.js:6:16147)
    at xm (cherry-markdown-7f1d788b.js:6:15636)
    at Yb (cherry-markdown-7f1d788b.js:6:19337)
    at gh.F9 (cherry-markdown-7f1d788b.js:13:3290)
    at HTMLDivElement.<anonymous> (cherry-markdown-7f1d788b.js:11:10329)

问题根源

这个问题的根本原因在于 Vue3 的响应式系统与 Cherry-Markdown 内部实现的交互方式存在兼容性问题。具体来说：

1. Vue3 的 ref 代理机制会包装原始数据，使其变成响应式对象
2. Cherry-Markdown 在处理光标位置计算时，预期直接操作 DOM 元素的原始属性
3. 当 Vue3 的响应式代理介入后，Cherry-Markdown 无法正确获取到预期的 DOM 属性值
4. 特别是在处理图片等复杂元素时，这种不兼容性表现得更为明显

解决方案

要解决这个问题，可以采用以下几种方法：

方法一：使用 shallowRef 替代 ref

在 Vue3 中，shallowRef 创建的响应式对象不会对其值进行深度转换，这可以避免 Vue 对 Cherry-Markdown 实例进行深度代理：

import { shallowRef } from 'vue';

const editorRef = shallowRef(null);

方法二：使用 markRaw 标记实例

Vue3 提供了 markRaw 方法来显式标记一个对象为"非响应式"：

import { ref, markRaw } from 'vue';
import CherryMarkdown from 'cherry-markdown';

const editor = markRaw(new CherryMarkdown(options));

方法三：延迟初始化

在组件挂载完成后再初始化 Cherry-Markdown 实例：

import { onMounted, ref } from 'vue';

const editorContainer = ref(null);

onMounted(() => {
  const editor = new CherryMarkdown({
    id: editorContainer.value,
    // 其他配置
  });
});

最佳实践建议

1. 避免直接响应式代理：对于复杂的第三方库实例，尽量避免使用 Vue 的响应式系统进行包装
2. 明确作用域：将编辑器实例的生命周期管理与组件生命周期明确绑定
3. 错误处理：添加适当的错误边界处理，增强用户体验
4. 版本兼容性检查：确保使用的 Cherry-Markdown 版本与 Vue3 兼容

总结

在 Vue3 生态中集成非 Vue 专用的第三方库时，响应式系统的代理机制可能会与库的内部实现产生冲突。通过理解 Vue3 的响应式原理和第三方库的工作机制，我们可以采用适当的包装策略来避免这类兼容性问题。对于 Cherry-Markdown 这类富文本编辑器，保持其 DOM 操作的直接性和原始性通常是最佳选择。