how to create a style selector in google closure editor

Question

I wonder how difficult it is to create a working "style selector" selector in the goog closure editor similar to the one in tinymce.

I mean a selector of text styles such as

heading 1
heading 2
heading 3
paragraph

From the documentation I take that there's none available by default, even though there are slightly related default buttons such as bold etc. The logic for the pre-existing buttons I am aware of are provided in a plugin called basictextformatter.js.

I'm familiar with writing plugins and I would implement this using the .execCommandInternal function, and using the ToolbarFactory to create a selectButton.

But my issue is, do I really have to write all the logic from scratch, such as: how much text to enclose in the style selection if the selection is a caret, and removing previous styles on applying new selections, handling cross-browser tagging insonsistencies, displaying the selected style in the button and all of this?

As it seems to be a standard feature in many other editors, is there a chance I have just missed a pre-existing plugin function or other building blocks? I'd be grateful for any hints for not re-inventing the wheel.

Answer 1

It sounds like you're referring to "plugins," which are objects you can inject into Google Closure's goog.editor.Field text editor. There are many standard plugins that are included in the Google Closure Library (bold, italicize, underline, make a link, etc), though you can always roll your own. For example, I had to make my own paste plugin that removed HTML formatting from pasted text.

After you pick out the plugins you want, you can then add buttons to the editor's toolbar which fire command events that those injected plugins listen to.

Here's a blog post that gives a much better explanation of how to actually set this up than I ever could here: http://closuretools.blogspot.com/2010/07/introducing-closure-library-editor.html

Answer 2

Well I think I found the answer.

There's a plugin which is part of the lib called HeaderFormatter. It's unfortunately dependent on BasicFormatter plugin and doesn't seem to come with a default button (you have to create your own) - but looks exactly like it's the answer to this question.