Question

我正在修改制作WYSIWYG编辑器。是的，我完全了解execCommand()，但我不喜欢how messy, and inconsistent it can get。

注意：这不是一个如何让它工作的问题，正如其他问题一样，而是如何保持最终结果的清洁。

下一个最好的选择似乎是window.getSelection()，效果很好，直到遇到这样的情况：

<p id="para" contenteditable="true">
A bit of <b>a</b> <span class="blackColor">lon</span><i>ger</i> sentence.
</p>

用户提供的内容

一些 a lon ger 句子

所以，这就是我想出来的，到目前为止大胆的事情：

function bold(){
    var box = document.getElementById("para");
    var sel = window.getSelection();
    if(sel.rangeCount < 1) return;

    var range = sel.getRangeAt(0);
    if(!validSelection(range.startContainer, box) || !validSelection(range.endContainer, box)){
        return;
    }

    // Get what we need from the first element
    var data = range.extractContents();

    for(var i = 0; i < data.childNodes.length; ++i){
        var b = document.createElement('b');
        b.innerHTML = data.childNodes[0].textContent;
        data.appendChild(b);
        data.removeChild(data.firstChild);
    }

    range.extractContents();
    range.insertNode(data);   
}

它有效，但它可能变得凌乱，非常非常快。

<p id="para" contenteditable="true">
    A <b>b</b><b>it</b><b></b> of <b>a</b> <span class="blackColor">lon</span><i>ger</i> sentence.
</p>

在调用bold()为“it”然后“bit”之后。

如果我通过多个元素调用它，例如“长”

<p id="para" contenteditable="true">
A bit <b>of </b><b>a</b><b> </b><b>lon</b><b>g</b><i>er</i> sentence.
</p>

这似乎比execCommand()差得多，但我仍然希望以干净的方式做到这一点。这样做的正确方法是什么？一旦完成所有内容，我就不会有非常混乱的代码？此外，我确实意识到其他格式已从原始格式中丢失。我正在做的事情，但我的主要目的是保持现在的清洁。

我在检查员中注意到，如果我按下[Ctrl] + B然后撤消，事情会分解成多个文本节点，但在实际代码中保持不那么混乱。但是，这只适用于粗体，斜体和下划线，我还想实现更多的东西。

作为最后一点，我愿意清理execCommand()，但如果我可以自己编码......好吧......我喜欢编码。：）

感谢。

使用WYSIWYG富文本编辑器保持代码清洁

0 个答案: