webkit stylewithcss contenteditable not working?

Question

I'm trying to use contenteditable and styleWithCss.

It doesn't seem to work in webkit.

Anytime I use do an execCommand, it generates a <b> rather than the span I expected.

Here's a demo: http://jsbin.com/izomo/2/edit

Select part of the text, click the bold button, and see the html output.

Is this a bug or am I doing something wrong.

Thank you very much.

Answer 1

I was unable to get this to work with the commands in both the answers here. For those who are still banging their heads with the issue this is how to get it to work.

We can pass three values to execCommand

document.execCommand( command, uiElement, value ) 

As Christopher's excellent Answer details the value of "styleWithCSS" is set to false by default just try:

alert(document.queryCommandState("styleWithCss"));

To set it to true you need to pass the third argument, "value" as true. Like this:

document.execCommand("styleWithCSS", null, true);

This works in both Firefox and Chrome

Answer 2

It seems like everything is working as intended. See Bug 13490 on WebKit BugZilla.

EDIT: Support for styleWithCSS was added to WebKit's source in changeset 40560, on 03 February 2009.

That said, it seems like ever since then, no matter what, styleWithCSS is always set to false, whereas before the change, style commands were always applied with CSS, as if styleWithCSS existed but was always set to true.

I even tried rewriting your document.execCommand line as follows, in accordance with the Mozilla documentation:

document.execCommand("styleWithCSS", true, null);
document.execCommand("bold", false, null);

These modified commands still work in Firefox, but not in either Chrome 5 or Safari 5 (both on Windows and installed today).

So, it would seem like this is a WebKit bug.

Answer 3

document.execCommand("styleWithCSS", true, null);
document.execCommand("bold", false, null);