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

Question

我正在尝试使用 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>

Answer 1

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

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

Cursor position resets in in text box after the highlight.js highlight function is called

javascript

highlight.js