Javascript Working in console but not inside script tag... What's the context of the console?

Question

I'm trying to implement the browser-provided rich text editor. Here is the Mozilla reference: https://developer.mozilla.org/en/rich-text_editing_in_mozilla

I've done this before and it works across IE/Chrome/Firefox albeit with a couple of bugs maybe.

Anyway I've set contenteditable=true (through javascript) and now all what's left to do is bind button clicks (for "Bold", "Italic", etc. formatting) to document.execCommand() calls. I'm doing that using the jQuery bind() method.

But nothing is happening when I call this function, say for example: document.execCommand('bold', false, null);

The click callback function is called and all, but document.execCommand() is simply ignored. It's not issuing any kind of error. But if I select text, and run the same command from the Javascript console, whether in Chrome or Firefox, it works! Text becomes, bold...

So how come it works in the console but not inside my code? What ere the context differences?

Thanks

PS: I was using the HTML "A" tag to for the format buttons (bold, italic, etc.). Once I replaced it with a BUTTON tag instead, it worked... Doesn't make much sense to me...

Answer 1

Sounds to me like one of two potential problems:

• The selection is being lost before the document.execCommand() call is executed. Using a button rather than a link will solve this, as you've already observed. Another option would be to store the selection before the selection is lost and restore it before the document.execCommand() call. Or using the unselectable attribute may work.

• The other possible issue is that you're using the wrong document object: you need the iframe's document, not the one in the main document.