Can't display multiple tinymce editors on one page

1
votes

I have a page where I am using accordion and tinymce together.

For each expand/collapse combo in the accordion control, I have an edit button. Clicking the edit button displays a form with 2 inputs. The first one is a textbox, and the second one is a textarea.

I want the textarea to be a tinymce instance. The accordion control has multiple expand/collapse controls and I want a tinymce instance to appear for each of them.

My tinymce init code is as follows

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,|,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,paste,pastetext,pasteword,|,bullist,numlist,|,advhr,|,forecolor,formatselect",
    // theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "", //"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "", //"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,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,
});

When I load up the page on chrome and firefox, the accordion control appears as expected. However the tinymce control only appears in the first collapse div. The rest of the collapse div's show regular textareas and not tinymce editors.

I have not tested on IE.

Can someone help please. I am not sure what I am doing wrong.

Thanks in advance Puneet

3
ruby-on-rails-3tinymceaccordion
How do you bind tinyMCE to your textareas? – Hck
Do I have to bind each textarea individually to tinymce? – ppaul74
No, you can bind all textareas at once with a class selector for example. But to figure out the problem I need to know how exactly you bind tinuMce instances to your textareas. – Hck
I am not doing anything special. I simply add a script tag in my page that points to the tiny_mce/tiny_mce.js file and I also add the javascript code above which does the tinyMCE.init – ppaul74
Ok, I see, you want tinyMce to replace all the textareas. Are other textareas tags aviliable when you call tinyMce.init? For example other textareas can be loaded and inserted into DOM by ajax. – Hck

3 Answers

1
votes

Try using mode: 'exact', and list all element-ids under the element setting.

1
votes

Ensuring that the id's of all the textarea elements was different fixed the issue. The textarea is where tinymce editor plugin appears

0
votes

You can separate TinyMCE code in remote file (for example lib/tinytextarea.html) and then load it using my jquery plugin which change id for textarea when it's loaded from remote file 

$.fn.loadChangeTAreaId = function(urlpath,prefix,suffix){
    $(this).load(urlpath, function(data) {
        $(this).find('textarea[id]').andSelf().attr('id', function(index, previous) {

            return prefix+ previous+suffix;
        });
    })

How to use ? 

$('#divContainer').loadChangeTAreaId('lib/tinytextarea.html','pre','suf');

if the previous textarea id is "elm" , the new id is "preelmsuf"