顽固的下划线不起作用答案

【问题标题】：stubborn underline won't work顽固的下划线不起作用
【发布时间】：2014-02-11 21:55:20
【问题描述】：

我正在制作一个文本编辑器，但是删除下划线功能不起作用。工作代码示例：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();
}

有什么想法吗？

【问题讨论】：

代码有什么问题？
如果我按下“U”按钮，所选代码会加下划线。如果我再次按下“U”按钮，它会检测到带下划线的代码。那么它应该删除下属但是这不起作用
可能与 createContextualFragment 是实验性规范有关。 developer.mozilla.org/en-US/docs/Web/API/…
另外，我会在类中使用跨度。
好久没看到font 标签了。没有它会更好:)。

标签： javascript html css underline

【解决方案1】：

删除下划线的问题是选择没有考虑包装 元素。  内的内容已被删除， 标签内的新内容插入 标签内。

我尝试上一个节点并检查它是否是然后删除该节点：

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();
    }

更新的小提琴是here

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

【讨论】：

【解决方案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;
}

等等。

【讨论】：

你试过用 jQuery/JS 改变样式吗？