处理内容可编辑div中的插入位置

Question

我在HTML中有这个内容可编辑的div

<div contenteditable="true" id="TextOnlyPage"></div>

继承我的jquery代码

var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm");
$('#TextOnlyPage').keyup(function(e){
    if(e.keyCode == 13){
        e.preventDefault();
        $('#TextOnlyPage').children().each(function() {
            if ( $(this).is("div") ) {
                $(this).contents().unwrap();
            }});
        $('#TextOnlyPage').append("<br/>");
    }
        $('#TextOnlyPage').children().contents().unwrap();
        var $this = $(this);
        var content = $this.html();
        $this.html(content.replace(rxp, "<span class='highlight'>$1</span>"));});

问题是插入符号位置,因为当它在string.replace方法中的数字周围应用span标记时,光标将转到内容的可编辑开头div.当我按下回车键时,它也不能进入下一行.

我知道我可以通过处理它range和selection对象,但无法找到一个有用的资源,以了解这些对象是如何工作的.

请为我提供这个问题的解决方案,如果是angularjs中的解决方案会更好,或者为我提供一个资源,我可以通过工作示例了解范围和选择对象.

Answer 1

以下是来自 MDN 的一些资源：Selection和Range。

我创建了这个JSFiddle 来演示重新定位插入符。

它并不适用于所有情况（例如，在输入时，使用 Shift + 箭头选择范围...），但它应该已经为您提供了一些想法。

以下是来自 MDN 的有关创建选择的示例：

/* Select all STRONG elements in an HTML document */

var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();

if(s.rangeCount > 0) s.removeAllRanges();

for(var i = 0; i < strongs.length; i++) {
    var range = document.createRange();
    range.selectNode(strongs[i]);
    s.addRange(range);
}

顺便说一句，使用它contentEditable会在将来带来更多麻烦，我建议尽力寻找替代方案。另外，请务必注意我提供的链接中的有限浏览器支持警告。