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

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

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

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： - 这只是一个实验。在使用之前，请考虑性能/浏览器兼容性和其他优点/缺点。

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

等。

顽固的下划线是行不通的

2 个答案: