0

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

  1. 答：链接
  2. H1、H2 标签
  3. 粗体、斜体和下划线

以上都是通过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;
}

任何帮助或指导表示赞赏。

4

1 回答 1

1

除了检查 nodeName 是否等于 nodeType，您可以创建一个要测试的 nodeTypes 数组，然后检查 nodeName 是否在数组中

于 2013-11-06T13:41:41.857 回答