寻龙剑侠
发布于 2024-12-03 / 19 阅读
0

Vue3 使用cherry-markdown,使用ref()产生的bug

错误信息:

cherry-markdown.esm.js:1  Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Jn2 (cherry-markdown.esm.js:1:85149)
    at nr2 (cherry-markdown.esm.js:1:85869)
    at tr2 (cherry-markdown.esm.js:1:85549)
    at br2 (cherry-markdown.esm.js:1:90001)
    at Ps2.charCoords (cherry-markdown.esm.js:1:191655)
    at Object.onScroll (cherry-markdown.esm.js:1:407751)
    at cherry-markdown.esm.js:1:413196
    at mt2 (cherry-markdown.esm.js:1:55934)
    at HTMLDivElement.<anonymous> (cherry-markdown.esm.js:1:184725)

另一个现象:使用cherry.setMarkdown(value,1) 时,编辑页面的光标位置错误,无法编辑图表之类的内容,并且滑动时,最上面会空出很长的空白。

错误原因:

根据 [Bug report] Cannot read properties of undefined (reading 'length') · Issue #401 · Tencent/cherry-markdown 的说法,是因为vue3中使用了ref()方法接收了new Cherry()对象,ref()产生了代理,导致出现奇奇怪怪的bug

将代码修改后,确实解决问题

//const cherrInstance = ref(null); //修改为下面的
let cherrInstance = null;

参考文章:[Bug report] Cannot read properties of undefined (reading 'length') · Issue #401 · Tencent/cherry-markdown