2

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

dave823
  • 1,191
  • 2
  • 15
  • 32
  • 1
    `execCommand` seems notoriously fragile still across environments. http://stackoverflow.com/questions/16225718/unable-to-get-document-execcommandundo-working-in-the-same-manner-across-bro and http://stackoverflow.com/questions/34498431/copy-and-paste-in-javascript-document-execcommandpaste-is-not-working-but?lq=1 It's not an answer, but you may find some scraps that help. – Xotic750 Dec 29 '15 at 14:19

1 Answers1

0

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)
 }
}
Vaughan Hilts
  • 2,839
  • 1
  • 20
  • 39