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?