Javascript 使用innerHTML更改焦点节点时如何重置选择焦点文本节点_Javascript_Html_Contenteditable

Javascript 使用innerHTML更改焦点节点时如何重置选择焦点文本节点

javascript html

Javascript 使用innerHTML更改焦点节点时如何重置选择焦点文本节点,javascript,html,contenteditable,Javascript,Html,Contenteditable,我尝试使用use ContentEditable元素制作标记富文本编辑器，并希望使标记源代码具有某种风格，因此编写以下解析器： <body> <div class="editor-content" ContentEditable="true" onKeyUp="inputChanges"></div> </body> <script type="text/javascript"> let inputChanges = (

我尝试使用use ContentEditable元素制作标记富文本编辑器，并希望使标记源代码具有某种风格，因此编写以下解析器：

<body>
    <div class="editor-content" ContentEditable="true" onKeyUp="inputChanges"></div>
</body>
<script type="text/javascript">
    let inputChanges = (event) => {

        //old selection info
        let selection = window.getSelection();
        let oldRange = selection.anchorOffset;
        let oldContainer = selection.anchorNode;

        let markdown = event.target.innerTex;

        let parserArray = [...];
        for (const i of parserArray) {
            markdown = markdown.replace(i.EXP, i.todo);
        }

        event.target.innerHTML = markdown;

        // I tried below to make cursor back

        const range = document.createRange();
        range.selectNodeContents(oldContainer);
        range.setStart(oldContainer, oldRange);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
    }
</script>


让inputChanges=（事件）=>{
//旧选择信息
让selection=window.getSelection（）；
设oldRange=selection.anchorOffset；
让oldContainer=selection.anchorNode；
让markdown=event.target.innerTex；
让parseraray=[…]；
for（parserArray的常数i）{
markdown=markdown.replace（i.EXP，i.todo）；
}
event.target.innerHTML=markdown；
//我试图在下面使光标返回
常量范围=document.createRange（）；
范围。选择NodeContents（旧容器）；
range.setStart（oldContainer，oldRange）；
范围。塌陷（真）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}

键入时，光标将位于编辑器的第一个位置。我试图修复，但它报告了一个错误： 文档中没有给定范围。

检查执行innerHTML之前和之后的选择：

我猜这是选择焦点节点的问题。如果是如何将焦点转移到文本节点

（文本节点是ContentEditable div的文本

[这里是文本节点]

）

我认为最好的答案是使用CodeMirror。嗯，我认为最好的答案是使用CodeMirror。