Solved

TinyMCE: Two editors with different CSS

Posted on 2008-10-03
3
633 Views
Last Modified: 2013-11-11
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?
0
Comment
Question by:hankknight
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 42

Assisted Solution

by:David S.
David S. earned 100 total points
ID: 22640243
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
 
LVL 10

Accepted Solution

by:
skij earned 400 total points
ID: 22844474
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
 
LVL 42

Expert Comment

by:David S.
ID: 22844512
@skij  I'm glad there's a better way to do it. Thanks for sharing it with us.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question