使用 javascript 在插入符号处插入，但只能在某个 class 范围内

Question

我正在使用由 ~~The Great and Powerful Oz~~ Tim Down 编写的一些 javascript，它在插入符号处插入内容。它工作得很好，但我如何限制该函数仅在 div 中运行，class 名称为 "editor-text"？

编辑：它还必须在 .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);
    }
}

Answer 1

您可以获得具有选择的节点，并检查它是否具有 class 或者是具有 class 等

的元素的子元素

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

使用 javascript 在插入符号处插入，但只能在某个 class 范围内

Insert at caret with javascript, but only within a certain class

javascript

range

selection