TinyMCE custom stylesheets for different post types

by

I use a custom stylesheet for TinyMCE, by placing custom styles in editor-style.css in my theme’s directory.

I am trying to figure out how to use a different stylesheet depending on what post type we are editing.

One way of getting different styles in TinyMCE is to toggle a class in the TinyMCE iFrame’s <body> tag. I have seen this in the New York Times’ ICE editor plugin, a javascript version of Microsoft Word’s “track changes” functionality that can be used with TinyMCE. That’s how it toggles visibility of edits without changing the post’s HTML. Here’s a self-contained example of this:

var toggleBodyClass = function() {

    var ed = tinyMCE.activeEditor;
    var body = ed.getBody()
    var cm = ed.controlManager;

    if(ed.dom.hasClass(body,'code-view')) {
        ed.dom.removeClass(body, 'myCustomClass');
    } else {
        ed.dom.addClass(body, 'myCustomClass');
    }

    ed.execCommand('mceRepaint');
}

This doesn’t allow me to use a separate stylesheet per se, but I can use .myCustomClass to create alternate all the alternate styles I want in editor-style.css.

The thing is, I’m not sure how I could set up something like this to be conditional on post type.

Is there something I can add to functions.php to achieve this?

1 Answer
1

As of 3.4, some classes have been added to TinyMCE so you can target them, including for custom post types. So, for instance, you will see post-type-{$slug} as a class on the body. See Trac ticket #19437 for more information.

Leave a Comment