javascript - 顽固的下划线不起作用

Question

我正在制作一个文本编辑器，但是删除下划线功能不起作用。 工作代码示例:jsfiddle

这是给出问题的代码

else if (tag == "u") {
    sell = window.getSelection().getRangeAt(0);

    if (selectionIsUnderlined()) {
        node = range.createContextualFragment("<font style='text-decoration: none !important'>" + sell + "</font>");
    } else {
        node = range.createContextualFragment("<u>" + sell + "</u>");
    }

    range.deleteContents();
}

有什么想法吗？

Answer 1

那么删除下划线的问题是选择没有考虑到包装 <u>元素。里面的内容<u>已删除，新内容为 <font>标签插入内部 <u>标签。

我尝试上升一个节点并检查它是否是 <u>然后删除节点:

if (selectionIsUnderlined()) {
    node = range.createContextualFragment(
           "<font style='text-decoration: none !important'>" + sell + "</font>");
    var nd = sel.anchorNode;
    if(nd.nodeName!=='span'){
        nd = nd.parentNode;
    }

    if (nd) {
        nd.remove();
    }

更新后的 fiddle 是 here

PS:-这只是一个实验。使用前请考虑性能/浏览器兼容性和其他优缺点。