CODEWITHSUNDEEP
javascriptajaxtinymce
user254875486
user254875486

Reputation: 11240

Dynamically adding TinyMCE-editor to textarea kills other instances

I have an html page with one or more textareas, each of which has a TinyMCE-editor (added to them by using tinyMCE.init({mode : "textareas", etc...});. At first they all work as they should, no problems. On the page is also a button that adds a new textarea to the page (using AJAX). In the handler of the AJAX call I append the responsetext to some div on the page. After that I try to add a TinyMCE to the new textfield using

tinyMCE.execCommand("mceAddControl", false, "text" + cnt);

Where cnt is some sort of offset, and "text" + cnt is unique for each textfield.

This works fine, except that all the TinyMCE-editors that were on the page before the new one arrived are now blank and do not respond to any input (nor typing nor clicking on any of their buttons). If I add another textarea to the page that one will have a working editor, and the previous one will also be killed.

I've tried adding the TinyMCE to the initial textareas seperately by using tinyMCE.init({mode : "none", etc...}); and for each textarea calling tinyMCE.execCommand("mceAddControl", false, "text" + cnt);. But the result was the same.

I've also tried to do tinyMCE.init({...}) again for every new textarea, but that yields the same result.

Please help me, I'm getting more and more frustrated and desperate...

Upvotes: 2

Views: 9778

Answers (6)

Pankaj Batham
Pankaj Batham

Reputation: 41

Solved:

When you are adding new textarea by jquery at the time you can call bellow function.

addTinyMCE();

function addTinyMCE(){
  // Initialize
  tinymce.init({
    selector : "textarea",
}

Upvotes: 1

nmase88
nmase88

Reputation: 172

I was having this exact issue and I lost hours and hours to it, whilst the rael_kid found his answer I'm going to add mine for anyone else who faces this problem.

My dynamic content was being added with 

currentDiv.innerHtml += newContent;

This redraws all of the innerhtml which then seems to break the existing tinymce editors. To prevent this from occurring you need to use insertAdjacentHTML instead as below:

currentDiv.insertAdjacentHTML('beforeend', newContent);

Hope this saves someone else the hours I lost!

Upvotes: 0

Pankaj
Pankaj

Reputation: 169

paste whole init code after $(wrapper).append('write your fields row div or tr code here'); //its working fine :)

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
        editor_selector : "mceEditor",
        editor_deselector : "mceNoEditor",  
    theme_advanced_buttons1 : "code,bold,italic,underline,image,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,tiny_mce_wiris_formulaEditor,tiny_mce_wiris_CAS,|,fullscreen,jbimages",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugins : 'inlinepopups,tiny_mce_wiris,jbimages',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                // Add you own code to execute something on click
                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});

Upvotes: -2

Josh Crews
Josh Crews

Reputation: 799

I had this problem too, what fixed for me:

When adding each new textarea dynamically, it needed mceAddControl added to it after being added to the screen. So in the same js that appended the new textarea for tinymce I run

$('.tinymce').each(function(){
    tinyMCE.execCommand('mceAddControl',false,$(this).attr('id'))
  });

where tinymce is the class of my tinymce textarea's

Upvotes: 2

user254875486
user254875486

Reputation: 11240

I know what the problem was. I appended the responseText of the AJAX-call which generates the inputfields to the div that already held the other inputfields. That was the problem. I now create a new div in which I place the new inputfields (so each textarea which has a tinyMCE editor is in his own div). This solves my problem.

Upvotes: 2

Christopher Tokar
Christopher Tokar

Reputation: 11887

I recall I had a similar problem once... this thread should help

Upvotes: 0

Related Questions