像插入Twitter一樣，將插入符號放在可編輯div的末尾

Question

http://jsfiddle.net/m45uM/

用a標記替換可以正常工作，但隨后將我設置為可編輯div中的第一個位置。

我怎樣才能解決這個問題？ 以及如何觸發一個事件，即我當前將插入符號放置在像twitter這樣的標記中？

function replacer(match, p1, p2, p3, offset, string) {
    var name = '';
    var user = '';
    $.each(ar.data, function (i, item) {
        var keyword = match.substring(1, (match.length - 1));
        if (keyword == item.name) {
            user = item.user;
            name = item.name;
        }
    });
    return '<a href="/' + user + '">' + name + '</a>';
}
$(document).ready(function (e) {
    $('body').on('keyup', '#cont', function (e) {
        var cont = $('#cont').html();
        var cont2 = cont.replace(/\@\w+\s/gi, replacer);
        $('#cont').html(cont2);
        console.log($('#cont').html());
    });
});
var ar = {
    "data": [{
        "user": "testuser1",
            "name": "testname1"
    }, {
        "user": "testuser2",
            "name": "testname2"
    }]
};
console.log(ar);

Answer 1

在嘗試進行此操作之前，需要注意以下幾點：

1. 請不要在字符串中添加元素-“ return ..”。 您將很難在此節點上執行其他操作。 相反，我建議您使用DOM API（創建/刪除/替換/添加/添加）來執行這些功能。 當您通讀時，我的建議會很清楚。

2. 您返回一個新字符串，然后將HTML盲目地設置為該特定字符串-您將丟失之前的所有文本。 示例：您好，我的名字是@ testuser1變為@-您丟失了“您好，我的名字是”

解：

為了照顧胡蘿卜放置，您必須記住用戶的選擇。 注意-如果您更改HTML，瀏覽器將丟失此選擇； 因此，您需要手動跟蹤。

在“替換”文本之前，您可以通過以下方式獲得選擇：

//IE & Others
if (window.getSelection) {
    userSelection = window.getSelection();
} else if (document.selection) {
    userSelection = document.selection.createRange();
}
selectedNode = userSelection.anchorNode;
selectedOffset = userSelection.anchorOffset;

替換文本后，需要將選擇內容重新設置為容器。

//IE & Others


var range,
        selection;
    if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.setStart(targetElement, targetOffset);
        range.setEnd(targetElement, targetOffset);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) {
        range = document.selection.createRange();
        range.moveToElementText(targetElement.parentElement);
        range.collapse(true);
        range.moveEnd('character', targetOffset);
        range.moveStart('character', targetOffset);
        range.select();
    }
}

目標元素和目標偏移量是您要定位的節點，也是光標要定位的位置（從左側開始）。

既然基礎已經結束，那么困難的部分就來了：

• 當通過放置錨元素拆分文本（TextNode）時，需要將目標元素作為錨元素，並將偏移量設為錨元素內文本的長度。 如果使用DOM API並將此元素存儲為變量，則將更加容易。

• 您需要適應用戶可能會轉到文本的任何部分並輸入@ username1的情況。 這應該很簡單。

您也可以使用Rangy JS lib來實現這一目標。

玩得開心！