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?
 
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

0
 
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

0
 
David S.Commented:
@skij  I'm glad there's a better way to do it. Thanks for sharing it with us.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.