Question

嗨，是否可以在选定的文字后添加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>' );}
    }

Answer 1

我使用的步骤是：

获取所选范围
将范围折叠到最后
调用范围的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);
}

Answer 2

我创建了一个适用于文本节点的简单函数。我相信你可以通过一些额外的努力为元素节点获得相同的结果。

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);

JQuery，如何在html中选中文本后附加div？

2 个答案: