Question

在这里的一些主题帮助下，我终于找到了一种安全的方法来获取脱字符号/光标在可编辑的DIV中的位置。（参考：Get caret position in contentEditable div）

我使用以下功能：

function getCaretPosition(element) {
var caretOffset = 0;
if (w3) {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
} else if (ie) {
    var textRange = document.selection.createRange();
    var preCaretTextRange = document.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}

这就是我的HTML：

<div id="result" contenteditable="true">

This is an example with <span style="color:#f00;">red</span> color<br>
This is an example with <span style="color:#f00;">red</span> color<br><br>
This is an example with <span style="color:#f00;">red</span> color

</div>

无论是否有换行符或html元素，该函数始终会返回插入符号的正确位置（例如当我手工计数时）。

在第二步中，我对div的内容执行服务器端操作，并将答案/“新”文本放回同一div中（因此，我用新内容替换了旧内容，但没有字符操作，只需插入html标签即可标记多个单词，例如，字母的位置不会改变。

在使用例如$（“＃result”）。html（modifiedtext）;之后；插入号将放置在div的开头。这是问题所在：我希望将插入号设置为与执行文本替换操作之前相同的位置。

我发现所有示例和函数均不适用于多行contenteditable div。

如果有人可以向我展示或解释我如何实现此功能，我将不胜感激。纯js或jquery都可以。

再次将插入符设置为可编辑的div

0 个答案: