调用 highlight.js 高亮功能后，光标位置在文本框中重置答案

【问题标题】：Cursor position resets in in text box after the highlight.js highlight function is called调用 highlight.js 高亮功能后，光标位置在文本框中重置
【发布时间】：2019-12-07 12:26:27
【问题描述】：

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

每次用户在块内输入内容时，它都会在 iframe 中呈现（想想 W3 School），并且我已成功使代码块中的代码突出显示，但发生的情况是代码块中的光标位置重置。如何停止光标位置重置，而不必不断跟踪其位置？ This is an image that illustrated what I've mentioned up to now

        hljs.initHighlightingOnLoad();


        const editor = document.querySelector(".editor");
        const iframe = document.querySelector("iframe");
        const codeSubmitBtn = document.querySelector(".code-editor-btn");


        editor.addEventListener('keyup', () => {
            let html = editor.getAttribute('data-prerequisite') + editor.textContent;
            iframe.src = `data:text/html;charset=utf-8, ${encodeURI(html)}`;

          document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightBlock(block);
            });

        });

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Code editor</title>
<!-- THE HIGHLIGHT JS STUFF-->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">

    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>


</head>


<body>

    <div class="main-editor">
        <pre>
    <code class="editor html" contenteditable="true"
    data-prerequisites="<li>Hi this needs to be in</li>">&lt;h1&gt; How are you &lt;/h1&gt;</code>
</pre>
        <iframe class="second"></iframe>
    </div>

    <button class="code-editor-btn" contenteditable="false">submit!</button>

</body>
</html>

【问题讨论】：

标签： javascript highlight.js

【解决方案1】：

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

【讨论】：

您好，非常感谢您的建议！！！！！！我一定会试一试...