I'm working on a very very simple rich text editor. I've read about using designMode = 'On' applied to an iframe, and then I use this to create bold text:

nameOfiframe.document.execCommand('bold',false,null);

Even though it's works, execCommand() uses b tags instead of strong to make bold text. I took a look at some advanced rich text editor, all of them used strong instead of the b tag.

Is there a simple way for me to fix this? Or are execCommand() not good to use at all?

Thanks!

I'm working on a very very simple rich text editor. I've read about using designMode = 'On' applied to an iframe, and then I use this to create bold text:

nameOfiframe.document.execCommand('bold',false,null);

Even though it's works, execCommand() uses b tags instead of strong to make bold text. I took a look at some advanced rich text editor, all of them used strong instead of the b tag.

Is there a simple way for me to fix this? Or are execCommand() not good to use at all?

Thanks!

• javascript
• contenteditable
• execmand

• execCommand() works differently in different browsers: help.dottoro./ljcvtcaw.php – Stefan Commented Feb 17, 2013 at 12:50
• FF creates the B tag, and execCommand() is exactly what's for, to create custom RTE. – Roko C. Buljan Commented Feb 17, 2013 at 12:50
• @roXon If you are sure of that, maybe you could make them aware of this by submitting a ment on that page. – Stefan Commented Feb 17, 2013 at 12:55
• Duplicate question...? stackoverflow./questions/4235024/… ATC's answer (stackoverflow./a/11771432/888177) seems to offer a possible solution. – Stefan Commented Feb 17, 2013 at 12:59
• @Stefan, no, I said wrong, now tested in Chrome, it created the B tag same as FF, while IE (8,9) creates the <strong>. Any way they stated that creates the <span> element, which is not the case any more. – Roko C. Buljan Commented Feb 17, 2013 at 13:05

2 Answers 2

Unfortunately document.execCommand() behaviour varies between browsers. As @1UnitedPower's answer mentions, document.execCommand() is intended for for presentational rather than semantic effect.

Two possible options are:

1. Write your own code to do the bold styling. Unfortunately it is non-trivial to do this properly. You could look at how major WYSIWYG editors such as CKEditor and TinyMCE do it.
2. Run some code to convert <b> elements into <strong> elements after calling document.execCommand(). This would seem the easier option. You will need some way to preserve the selection while doing the conversion, if that's important to you.

execCommand does not accept a html-tag-name as its first parameter, but a MIDAS-mand. See https://developer.mozilla/en-US/docs/Midas for a list of available mands.

This behaviour is wished, because it targets what a wysiwyg-editor aims for. WYSIWYG is not meant for semantic, but for stylistic purposes. You cannot determine the semantic behind a bold text.

However have a look at insertHtml and styleWithCSS mands.