Javascript 在contentEditable div中使用jQuery替换Htmlat

我正在尝试实现以下功能：

<div id="editor" contenteditable="true">
I am some text.
</div>

$('#editor').replaceHtmlAt(start, end, string);

这可能吗

编辑

我是这样做的

$(this).slice(pos-1).html('<span id="mention'+pos+'">@</span>');

---

然而，我遇到了另一个问题。在Chrome中，编辑器中的插入符号位置一直向后移动。。。如何恢复span标记中“@”之后插入符号的位置

Dylan，虽然你关于替换“@”的想法在外行看来是正确的，但我们编码人员知道，我们可以截取和处理关键事件

$("#editor").keyup(function(){
    $(this).html($(this).html().replace(/@/g, "<div>Hello</div>"));
});

所以，在德里克用过的基础上，我会：

// @see http://stackoverflow.com/a/4836809/314056
function insertNodeBeforeCaret(node) {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
            range = range.cloneRange();
            range.selectNodeContents(node);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var html = (node.nodeType == 1) ? node.outerHTML : node.data;
        var id = "marker_" + ("" + Math.random()).slice(2);
        html += '<span id="' + id + '"></span>';
        var textRange = document.selection.createRange();
        textRange.collapse(false);
        textRange.pasteHTML(html);
        var markerSpan = document.getElementById(id);
        textRange.moveToElementText(markerSpan);
        textRange.select();
        markerSpan.parentNode.removeChild(markerSpan);
    }
}

$("#editor").keydown(function(event){
    if(event.which == 50 && event.shiftKey){ // 50 => '2' and shift+'2' => @
        event.preventDefault(); // abort inserting the '@'
        var html = $('<span>hi</span>'); // create html node
        insertNodeBeforeCaret(html[0]); // insert node before caret
    }
});​

---

既然你解决了那个问题。要移动闪光灯，请使用对象。创建一个选择，从你想让你的眼罩移动到的点。

@Mohsen-这不是他想做的吗？我猜他想实现facebook一样的标记对不起，这种方法效率太低了：我认为键控中已经有了@，你不能取消它。@Derek我刚刚做了，event.preventDefault就是这样做的。谢谢Christian，这也行得通，但它不能解决插入符号位置移到开头的问题。它仍然不起作用？还是我不知道如何使用它？@Derek不使用html；如果他只是插入所需的HTML而不是替换现有的HTML，他就不必这样做。那么我会使用这种方法吗？sel.extendparentNode，偏移量

// @see http://stackoverflow.com/a/4836809/314056
function insertNodeBeforeCaret(node) {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
            range = range.cloneRange();
            range.selectNodeContents(node);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var html = (node.nodeType == 1) ? node.outerHTML : node.data;
        var id = "marker_" + ("" + Math.random()).slice(2);
        html += '<span id="' + id + '"></span>';
        var textRange = document.selection.createRange();
        textRange.collapse(false);
        textRange.pasteHTML(html);
        var markerSpan = document.getElementById(id);
        textRange.moveToElementText(markerSpan);
        textRange.select();
        markerSpan.parentNode.removeChild(markerSpan);
    }
}

$("#editor").keydown(function(event){
    if(event.which == 50 && event.shiftKey){ // 50 => '2' and shift+'2' => @
        event.preventDefault(); // abort inserting the '@'
        var html = $('<span>hi</span>'); // create html node
        insertNodeBeforeCaret(html[0]); // insert node before caret
    }
});​