Search code examples
javascripthtmleditorgoogle-closuregoogle-closure-library

how to create a style selector in google closure editor


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.


Solution

  • 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.