使用javascript插入插入符号,但仅限于某个类

时间:2015-03-02 20:11:33

标签: javascript range selection

我正在使用由 The Great and Powerful Oz Tim Down编写的一些javascript来插入插入符号。它工作得很好,但是如何限制函数只能在类名为“editor-text”的div中运行?

编辑:它也必须在.editor-text div中的其他元素(例如H1)中工作。

Edit2:还必须处理新行。见http://jsfiddle.net/j5mv219L/

现场演示: http://jsfiddle.net/wfo7gcvh/

守则:

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(),
                node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

1 个答案:

答案 0 :(得分:0)

您可以获取具有所选内容的节点,并检查它是否具有该类,或者是具有该类的元素的子级等

function pasteHtmlAtCaret(html, selector) {
    var sel, range, parent, node = null;

    if (document.selection) {
        node = document.selection.createRange().parentElement();
    } else {
        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
            node = selection.getRangeAt(0).startContainer;
            if (node !== $(node).closest(selector).get(0)) {
                node = node.parentNode;
            }
        }
    }



    if (node && $(node).closest(selector).length > 0 && window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(),
                node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }
}

FIDDLE