javascript - 对空选择执行命令

Question

我正在一个专门的文本/HTML 编辑器中使用 Javascript 和 JQuery 在一个 contenteditable div 中工作。我使用 execcommand 实现了不同的文本样式(粗体、斜体……)。这似乎仅在所选文本不为空时才有效。解决此问题的最佳方法是什么？

这里是我想做的一个例子，文本是编辑器中的文本，HTML 是相应的 html 代码，|作为光标位置:

Text: Hello| World
HTML: <b>Hello| World</b>

通过按下“粗体”按钮，execcommand('bold')-命令应在所选位置执行，插入符号应放置在修改后的位置内。

Text: Hello| World    
HTML: <b>Hello</b>|</b> World</b>

这是行不通的。我通过添加包含空白的文本节点找到了解决方法。这似乎适用于 Internet Explorer，但不适用于 Firefox。这里有一个简单的例子:

HTML:

<div id="textcontent" contenteditable="true" overflow:auto;"><p>Enter text</p></div>
<button type="button" id="setBold">Bold</button>

---

Javascript:

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    }
    else {
        var selObj = document.getSelection();
        var selRange = selObj.getRangeAt(0);        
        var newNode = document.createTextNode(' ');

        selRange.deleteContents();
        selRange.insertNode(newNode);

        selObj.removeAllRanges();
        selObj.addRange(selRange);

        document.execCommand('bold');

        selRange.deleteContents();
        selObj.removeAllRanges();
        selObj.addRange(selRange);        
    }
});

这里对应的jsfiddle:http://jsfiddle.net/andibioticum/3V7pK/

Answer 1

我通过插入一个包含字母的文本节点、调用该节点上的 execcommand、之后删除它并使用 focus() 设置插入符来修改我的变通解决方案。

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    } 
    else {
        //get selected position
        var selObj = document.getSelection();
        //get range of selected position
        var selRange = selObj.getRangeAt(0);
        //Insert node with dummy text 'd'
        var newNode = document.createTextNode('d');
        selRange.insertNode(newNode);
        selObj.removeAllRanges();
        selObj.addRange(selRange);

        //Execute command on dummy
        document.execCommand('bold');

        //Delete dummy from range
        selRange.setStart(newNode, 0);
        selRange.setEnd(newNode, 1);
        selRange.deleteContents();

        selObj.removeAllRanges();
        selObj.addRange(selRange);
        //Focus on empty element
        $('#textcontent').focus();
   }
});

在这里查看 fiddle :http://jsfiddle.net/andibioticum/XJuRf/