Search code examples
javascripteditordesignmode

RichText editor button state on insertion point location

I've created a mini browser RichText editor that implements basic stuff like bold, italic, underline, indent among others. Say I have these on my textarea (which is really an iframe):

This is a bold text.

and let's take the BOLD button to further describe my problem. When the insertion point is at this state: Thi|s is a bold text.

then the BOLD button would be on its normal state. However, if it is in this state: This is a bol|d text

then the BOLD button would be on a selected/active state. How will I know if the BOLD button should be on an active/selected state or if it should be on a normal state with respect to the location of the insertion point?

Solution

  • For the bold command, you can use document.queryCommandState("bold").

    Here's a more detailed answer to a similar question from a couple of days ago: https://stackoverflow.com/a/8298215/96100