document.execCommand won't unbold in IE11

Question

I am trying to use an iframe (in designMode) as a rich text editor.

<iframe name="richTextField" id="richTextField" class="rte"></iframe>

I also have a button, which can bold/unbold text in the iframe by calling a javascript function iBold.

<a href="javascript:iBold()" type="button" value="bold"><img src="/images/bold.gif" id="boldButton"/></a>

function iBold()
{
    richTextField.document.execCommand('bold');
    console.log(window.frames['richTextField'].document.body.innerHTML);
}

The bold button works for most cases, but there is one case that it does not work (in IE11). If I select (highlight) small portions of the text in the iframe, I can bold it and also unbold it with the bold button, but if I select ALL text in the iframe, I can bold it, but I can never unbold it. The text is forever bold after that point; no matter what I select/highlight, execCommand won't unbold anything. Note: it works fine in Firefox of course.

http://jsbin.com/hiwetumobo/1/edit?html,js,output

Answer 1

It's not really the best solution but the following will work, at least.

if(isIE11) {
 isBolded = yourDocumentHere.queryCommandValue('bold');
 if(isBolded) {
   yourDocumentHere.execCommand('removeFormat', false)
 }
}