Wednesday, November 14, 2007

multiple TinyMCE 3 instances on one page

Two of my favorite javascript libraries, YUI and ExtJS, both have WYSIWYG editors. While the editor for ExtJS , in my opinion, has some more ways to go, I've heard raves about YUI's implementation at least from one other developer.

However, there is one WYSIWYG editor that trumps them both and all the others I've seen, it's called TinyMCE.

So it's no wonder that many a developer would like to use it and/or integrate it into their javascript library of choice, including myself.

If you visit the TinyMCE wiki, you'll probably learn to initialize TinyMCE like this


tinyMCE.init({
theme : "advanced",
mode : "textarea",
language : "en",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough"
});


This works great if :
  1. you want the editor to appear immediately after the page has loaded
  2. all the editors on your page share the same configuration
In one of my recent projects with ExtJS 2.0 I needed to instantiate two different TinyMCE instances in different layout panels so the method above won't work, so here's how I did it.

Store the configuration objects in an array.

var configArray = [{
theme : "advanced",
mode : "none",
language : "en",
height:"200",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""
},{
theme : "advanced",
mode : "none",
language : "en",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left"
}]


In a DOM event, like click or expand that reveals one of my TinyMCE instances (textarea1), I do ..


tinyMCE.settings = configArray[0];
tinyMCE.execCommand('mceAddControl', true, "textarea1");



When I want to reveal my second TinyMCE instance (textarea2), I do ..



tinyMCE.settings = configArray[1];
tinyMCE.execCommand('mceAddControl', true, "textarea2");




To clear the contents of the TinyMCE editor on textarea1, I do ...



tinyMCE.editors.textarea1.setContent(" ");




Here is an html page with the above in action. Remember to change the src of the tinymce javascript.


<html>

<head>
<title>TinyMCE </title>

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script>

var tinymceConfigs = [ {theme : "advanced",
mode : "none",
language : "en",
height:"200",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "" },{ theme : "advanced",
mode : "none",
language : "en",
height:"200",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left"}];

function tinyfy(settingid,el_id) {
tinyMCE.settings = tinymceConfigs[settingid];
tinyMCE.execCommand('mceAddControl', true, el_id);
}

</script>

</head>

<body>

<h2>Editor 1</h2>
<a href="javascript:void(0)" onclick="tinyfy(0,'ed1')">show editor 1</a>

<br><textarea id="ed1"></textarea>

<h2>Editor 2</h2>
<a href="javascript:void(0)" onclick="tinyfy(1,'ed2')">show editor 2</a>

<br><textarea id="ed2"></textarea>

</body>

</html>