execcommand on empty selection

Question

I'm working on a specialized Text/HTML Editor with Javascript and JQuery in a contenteditable div. I implemented the different text styles (bold, italic,...) with execcommand. This seems to work only if the selected text is not empty. What is the best way to solve this problem?

Here an example of what I want to do with Text being the text in the editor, HTML being the corresponding html code and | being the cursor Position:

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

By pressing a "bold" button, the execcommand('bold')-command should be executed on the selected position and the caret should be placed inside the modified position.

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

This does not work. I found a Workaround by adding an text node containing a blank. This seems to work in Internet Explorer, but not in Firefox. Here a simple example:

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

And the corresponding jsfiddle here: http://jsfiddle.net/andibioticum/3V7pK/

Answer 1

I modified my workaround-solution by inserting a text node containing a letter, calling the execcommand on that node, deleting it afterwards and setting the caret with 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();
   }
});

See the fiddle here: http://jsfiddle.net/andibioticum/XJuRf/