TinyMCE SetContent for multiple instances

Question

I am trying to set the content of a number of text editors on page load. I am not too familiar with TinyMCE and have inherited the code somewhat. Here is how I am initializing the editors -

tinyMCE.init({
            // General options            
            mode: "exact",
            elements: "txtContent1,txtContent2,txtContent3,txtContent4,txtContent5,txtContentRight1,txtContentRight2,txtContentRight3,txtContentRight4,txtContentRight5",
            theme: "advanced",
            plugins: "layer,table,save,advhr,advimage,advlink,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",            
            // Theme options
            theme_advanced_buttons1: "bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,format,selectcut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,cleanup,help,code,",
            theme_advanced_buttons2: "ComparativeFiguresTableButton",
            //theme_advanced_buttons3: "ComparativeFiguresTableButton,tablecontrols,|,hr,|,sub,sup,|,print,|,ltr,rtl,|,fullscreen",
            //theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,
            relative_urls: false,
            document_base_url : "example.com",
            remove_script_host: false,
            setup: function(ed) {
                // Add a custom button
            ed.addButton('ComparativeFiguresTableButton', {
                title: 'Comparative Figures Table',
                image: 'images/icons/cumulativefiguresBtn.gif',
                    onclick: function() {
                        // Add you own code to execute something on click
                        ed.focus();
                        ed.selection.setContent('<p><strong>Comparative Figures</strong></p><table border="0" width="100%" cellspacing="0" cellpadding="0" style="font-size:12px; line-height:1.5em; font-family:Verdana, Arial, Helvetica, sans-serif;"><tbody><tr><td>&nbsp;</td><td><strong>Offered</strong></td><td><strong>Sold</strong></td><td><strong>Aggregate (€)</strong></td><td><strong>Average (€)</strong></td><td><strong>Median (€)</strong></td></tr><tr><td><strong>2009</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr><tr><td><strong>2010</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr></tbody></table><br clear="all" />');
                    }
                });
            }

Can anyone suggest the best way to set different html content for each editor on page load?

Thanks, Tristan

Answer 1

From your config you have quite a few instances of TinyMCE on your page. In each, you have a button that allows the end user to insert some predefined content (a "Comparative Figures Table")

When you say you want to " set different html content for each editor on page load " I assume you mean you want to have each instance of TinyMCE load with the appropriate content (either some default or what you retrieved from your repository).

If that's the case then, as @russjman stated, each of the ID's in the elements config item refers to a TextArea/DIV on the page. All you need to do is put the appropriate content in those elements. Importantly, remember to HTML encode it.

For example

<textarea id="txtContent1">
    <?php echo htmlentities("<p>This is the content from the first text area.</p>");?></textarea>
<textarea id="txtContent2">
    <?php echo htmlentities("<p>This is the content from the second text area.</p><p><strong>Note</strong> This needed to be encoded using htmlentities in PHP</p>");?></textarea>

The other way to read your question is that you want the ComparativeFiguresTableButton to do something different in each instance of the editor. In this case you will need a different config for each element, each with a different value in the ed.selection.setContent() method

As @Thariama states, the best approach would be to create a simple plugin that adds a button and has a config parameter that is the content you want inserted when it's pressed.

Finally, if all you want to do is insert HTML fragments, then it may be worth checking out the template plugin.

Answer 2

Try creating your own plugin (it is pretty easy):

ed.onInit.add(function(ed){
  ed.setContent('<p>my new content</p>');
}

Since every tinymce instance gets initialized using the same code - they all get the same content (right after the editor instance has loaded).

Alernative 1: I am not sure if the following init setting will work, but you might give it a try:

setup : function(ed) {
 ed.setContent('<p>my new content</p>');
}

Alernative 2: Set the content of each textarea which gets transformated into a tinymce editor instance before tinymce.init gets called.

Answer 3

I assume that you want set up TinyMCE for multiple textareas on the same page. The 'elements' variable should be doing what you are asking as long as they correspond to a textarea with an id.

<textarea id="txtContent1" ></textarea>
<textarea id="txtContent2" ></textarea>