TinyMCE: Two editors with different CSS

I want to have two editors on the same page.

I want each editor to use a unique css file for formatting the content that is edited.

TinyMCE does allow for multiple editors:
      // from TinyMCE JS settings        
      elements : "editor1,editor2,editor3",

The problem is that TinyMCE does NOT seem to allow for different CSS files for these editors:
      // from TinyMCE JS settings        
      content_css : "../css/editor1.css",

How can I define a different CSS file for the content of each editor?
LVL 16
hankknightAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
It looks like you may need to call tinyMCE.init() once for each editor that you want to use a given stylesheet with.

The code may look like this:


var tinyMCE_options = {
        mode : "exact",
        elements : "editor1",
        content_css : "../css/editor1.css"
};
 
tinyMCE.init(tinyMCE_options);
tinyMCE_options.elements = 'editor2';
tinyMCE_options.content_css = '../css/editor2.css';
tinyMCE.init(tinyMCE_options);

Open in new window

skijCommented:
You should NOT call tinyMCE.init() once for each editor that you want to use a given stylesheet with. That will waste memory and make everything run slower.

This should be done using the built-in API after TinyMCE has been initiated.

http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.dom.DOMUtils/loadCSS


tinyMCE.get('editor1').dom.loadCSS('editor1.css');
tinyMCE.get('editor2').dom.loadCSS('editor2.css');
tinyMCE.get('editor3').dom.loadCSS('editor3.css');

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David S.Commented:
@skij  I'm glad there's a better way to do it. Thanks for sharing it with us.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.