I want to read if a certain text in a contenteditable element is bold or not. In Chrome document.queryCommandValue("bold") returns "true"/"false" as a string, IE returns a true/false as a boolean, but Firefox returns (empty string) in the developer console.

I made a fiddle as an example: /

If you write som text in the div, mark it and then hit "Bold" the span should show "true"/"false" or true/false. I don't really care if its as a string or a boolean as I can convert it later.

I want to read if a certain text in a contenteditable element is bold or not. In Chrome document.queryCommandValue("bold") returns "true"/"false" as a string, IE returns a true/false as a boolean, but Firefox returns (empty string) in the developer console.

I made a fiddle as an example: http://jsfiddle/nTQd2/

If you write som text in the div, mark it and then hit "Bold" the span should show "true"/"false" or true/false. I don't really care if its as a string or a boolean as I can convert it later.

• javascript
• html
• firefox
• contenteditable

2 Answers 2

For bold, italic and similar, use document.queryCommandState(). Use document.queryCommandValue() for non-Boolean mands.

http://jsfiddle/nTQd2/1/

That's simple.

Document.queryCommandValue() 

returns a string. Instead of that use this.

Document.queryCommandState('Bold')

This will return a boolean value as true/false.

Example:

function isSelectedTextBold()
{
    var isBold = document.queryCommandState("Bold");
    return isBold;
}

I am also specifying function calls for other formatting options.

1. Italic -> document.queryCommandState("Italic");
2. Underline -> document.queryCommandState("Underline");
3. Left Justify -> document.queryCommandState("justifyLeft");
4. Center Justify -> document.queryCommandState("justifyCenter");
5. Right Justify -> document.queryCommandState("justifyRight");

I hope this helps. :)