使用 javascript 到 select 文本和使用 createRange 的包含元素

Question

我正在使用我自己的通用所见即所得编辑器，但我无法选择一些文本。我正在使用 div 并将 contenteditable 设置为 true 来输入文本。问题是我正在使用 <var> 标记来突出显示用户应该删除并用自己的话重写的一些文本。单击 <var> 标签内的文本时，它会像我预期的那样突出显示它，但是当你按下退格键时，它只会删除文本而不是标签 (<var>)。我怎样才能告诉选择在选择的每一端抓取更多的字符，以便它也删除 <var> 标签？我正在使用以下内容进行选择。

    var range = document.createRange();
    range.selectNodeContents(elem);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

Answer 1

在 div 的 click 事件上放置函数。

选择了 <var> 标签。

使用 .selectNode 而不是 .selectNodeContents。

不过浏览器的处理方式不同。当您输入更多文本时，有些会添加 <i></i> 标签，有些则不会，但这确实会完全删除 <var> 标签....

var myDiv = document.getElementById("myDiv");
var elem = document.getElementById("myVar");
myDiv.addEventListener("click", function() {
    var range = document.createRange();
    range.selectNode(elem);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);            
});

<div contenteditable="true" id="myDiv">
Hello, this<var id="myVar"> is a test</var> of the editor
</div>

使用 javascript 到 select 文本和使用 createRange 的包含元素

Using javascript to select text and the containing element using createRange

javascript

wysiwyg