Question

我正在开发一个html编辑器，可以帮助用户根据他们输入的内容来推荐单词，比如twitter编辑器编辑器是一个div，其满足属性设置为true 一切都很好，直到换字。

考虑一个例子

<div id="editableDiv" contenteditable="true">
    the @tw
</div>

请参阅screenshot 当用户输入@时，弹出建议列表，同时，我将存储这个最近输入的@索引，以便以后通过调用以下函数来使用。

getCaretPosition : function(){
       var element = document.getElementById("editableDiv");
       var caretOffset = 0;
       if (typeof window.getSelection != "undefined") {
            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 (typeof document.selection != "undefined" && document.selection.type != "Control") {
            var textRange = document.selection.createRange();
            var preCaretTextRange = document.body.createTextRange();
            preCaretTextRange.moveToElementText(element);
            preCaretTextRange.setEndPoint("EndToEnd", textRange);
            caretOffset = preCaretTextRange.text.length;
        }
        return caretOffset;
    }

假设用户已从建议中选择twitter，现在我必须将tw替换为twitter字样要更换我遵循以下步骤的字符串，
1）将字符串分为两部分， @和tw。
2）从第二个部分中移除字符串tw直到第一个空格或EOL 3）将选定的字符串（twitter）放在这两个部分之间结果必须是“ @twitter”

以下是问题部分

必须应用上述技术而不会丢失已对文档执行的文本格式（已加粗）。所以要做到这一点，我必须收集editableDiv的html内容这是收集的html字符串
the @tw

根据步骤1，如果我在索引5上划分上面的字符串，则2个部分看起来像是
第1部分：the
第2部分： @tw

第2步将删除
第3步将结合两部分最终结果看起来像 @twitter 。但这不是预期的结果。这完全是因为字符串中存在html元素如何在适当的位置划分html字符串并替换所选的选项？

如何获得关于其html内容的可编辑div的插入索引

0 个答案: