Add CSS styles to WordPress Editor

Question

I'm currently using the TinyMCE Styleselect menu to add CSS classes into the WordPress editor. This has worked OK for me so far and is great if you only have a few classes that you want to use. When I have added more classes however, the styleselect dropdown becomes a little un-user friendly as you have to scroll through the options which can also make the page scroll also.

The solution I want to implement involves a button in the tinymce toolbar that when clicked will open a popup window, from which you can select a class to apply to the selected text in the editor.

I know how to add custom buttons to tinymce and create the popup window but how do I make the buttons that add the class actually apply the class to the the selection?

Anybody any ideas of the code I need to use to do this or a tutorial detailing the above would be great.

Simon · Accepted Answer · 2012-02-08 23:30:25Z

1

I am not entirely certain this is correct, but I think that if you want to go beyond customizing TinyMCE via the hooks provided by WordPress you will have to go through TinyMCE itself. Consequently this is probably more of a TinyMCE question, than it is a WordPress question. I suggest you check out the TinyMCE plugin documentation.

However, once you have your plugin ready there might be a bit of an issue getting WordPress to load it. I'd definitely try to avoid manually placing it inside wp-includes like the rest of TinyMCE, but it seems WordPress does actually provide a way of loading external plugins.

answered Feb 8, 2012 at 23:30

Simon

3,7371 gold badge38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add CSS styles to WordPress Editor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related