4

次の機能を実現しようとしています。

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

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

使用事例：

  1. ユーザーは@内部を入力します#editor

  2. keyupイベントピックアップ@位置

  3. <プレ>$('#editor').replaceHtmlAt(position of @, position of @ + 1, "<div>Hello</div>");

これは可能ですか？

編集

これを行うことで動作するようになりました

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

しかし、私は別の問題に遭遇しました。Chrome では、#editor 内のキャレットの位置が奥まで移動します... span タグ内の '@' の後のキャレットの位置を復元するにはどうすればよいですか?

4

3 に答える 3

5

ディラン、'@' を置き換えることについてのあなたの考えは素人の言葉で正しいですが、私たち (コーダー) は重要なイベントを傍受していじることができることを知っています.

だから、デレクがここで使ったことに基づいて、私は次のようにします：

// @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
    }
});​

デモ JSFiddle

于 2012-06-11T00:38:57.397 に答える
3 
$("#editor").keyup(function(){
    $(this).html($(this).html().replace(/@/g, "<div>Hello</div>"));
});
于 2012-06-11T00:29:16.220 に答える
1

これで問題は解決しました。ウインカーを移動するには、Selectionオブジェクトを使用します。ウインカーを動かしたいポイントから、ポイントまでの選択を作成します。

于 2012-06-11T00:41:25.703 に答える