顽固的下划线不起作用

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>内的内容已被移除，<u>标签内插入了带有<font>标签的新内容。

我尝试上升一个节点并检查它是否<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();
    }

更新的小提琴在这里

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

Answer 2

尝试这样的事情：

var node="";
var divs=0;
if (selectionIsUnderlined()) {
   node+="<div class=underline>";
   divs++;
}
if(selectionIsBold()){
   node+="<div class=bold>";
   divs++;
}
node+=sell;

然后关闭你的div。

.underline{
   text-decoration: underline;
}

等。。