Javascript 调用highlight.js highlight函数后，光标位置在文本框中重置

我正在尝试使用HTML CSS和JavaScript创建一个自定义代码编辑器，我希望突出显示可编辑代码块中包含的代码，这就是highlight.js的作用

每次用户在块内键入内容时，它都会在iframe中呈现（想想W3学校），我已经成功地使代码块中的代码高亮显示，但发生的是，代码块中的光标位置会重置。如何停止光标位置重置而不必不断跟踪其位置？

hljs.initHighlightingOnLoad（）；
常量编辑器=document.querySelector（“.editor”）；
const iframe=document.querySelector（“iframe”）；
const code submitbtn=document.querySelector（“.code editor btn”）；
editor.addEventListener（'keyup'，（）=>{
让html=editor.getAttribute（'data-prerequisite'）+editor.textContent；
iframe.src=`data:text/html；charset=utf-8，${encodeURI（html）}`；
document.querySelectorAll（'pre-code'）.forEach（（块）=>{
高亮度块（块）；
});
});

代码编辑器
h1你好/h1

提交

实际上highlight.js不打算这样使用。然而，可能有一些解决方法，比如跟踪光标位置并将其移动到原来的位置，但这并不值得。尝试一些更方便的方法，如“Ace Highlight”

嗨，非常感谢你的建议！！！！！！我一定会尝试一下。。。