Question

我构建了一个非常简单的contenteditable编辑器，它允许以下内容：

A：链接
H1，H2标签
粗体，斜体和下划线

以上都是通过document.execCommand完成的，并且运行正常。如果焦点区域有父标记（一个或多个），我的问题是检查onmousedown / up。

我设法编写了一个函数，如果存在特定的标签，它将检查并更新我的编辑器的CSS。但是这并没有考虑多个标签，我确信必须有一个简单的方法来做这个，我忽略了一些东西。

到目前为止我的代码（目前仅查找一个代码）：

document.onmousedown = triggerTextSelection;
document.onmouseup = function (event) {
    setTimeout(function () {
        check(event);
    }, 1);
};

function check() {
    // The same applies for Bold,Italic,Underline etc...
    if (hasParentWithTag(getFocusNode(), 'blockquote')) {
        $('.quote-btn').addClass('btn-active');
    } else {
        $('.quote-btn').removeClass('btn-active');
    }
}

function getFocusNode() {
    return document.getSelection().focusNode;
}

function hasParentWithTag(node, nodeType) {
    while (node.parentNode) {
        if (node.nodeName.toLowerCase() === nodeType) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

感谢任何帮助或指导。

Answer 1

您可以创建一个nodeTypes数组，而不是检查nodeName是否等于nodeType，然后检查nodeName是否在数组中

Javascript检查多个父标签

1 个答案: