0

こんにちは、選択したテキストの後に div を追加することは可能ですか? jQuery または java-script と rangy js を使用

以下のコードを試してみましたが、動作しません..

function pin_surroundRange() {
    var range = getFirstRange(); //get selected text via rangy js 
    if(range != null) {
        $( '#content_area ('+range+')' ).replaceWith( ''+range+'<div><input type="text" /></div>' );}
    }
4

2 に答える 2

3

私が使用する手順は次のとおりです。

  • 選択範囲を取得する
  • 範囲を最後まで折りたたむ
  • 範囲のinsertNode()メソッドを呼び出す

コード：

var div = document.createElement("div");
div.appendChild( document.createElement("input") );

var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    range.collapse(false);
    range.insertNode(div);
}
于 2013-04-25T14:04:01.250 に答える
1

テキストノードで機能する単純な関数を作成しました。要素ノードについても、もう少し努力すれば同じ結果が得られると思います。

http://jsfiddle.net/tarabyte/HTYhm/4/

var addDiv = function() {
    rangy.init(); //This might be somewhere else
    var sel = rangy.getSelection();
    if(sel && sel.anchorNode && sel.anchorNode.nodeType === 3 ) { //For text nodes only
        var node = $(sel.anchorNode),
            text = node.text(),
            length = Math.max(sel.focusOffset, sel.anchorOffset); 

        node.replaceWith(text.substring(0, length) 
                         + "<div> <input name='edit'/></div>" 
                         + text.substring(length ));
    }
}
$("#mark").on("click", addDiv);
于 2013-04-25T13:31:28.360 に答える