javascript - Dynamically adding TinyMCE-editor to textarea kills other instances - Stack Overflow

admin管理员组

文章数量:1332344

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...

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...

• javascript
• ajax
• tinymce

Share Improve this question Follow asked Feb 9, 2010 at 13:37 user254875486user254875486 11.2k77 gold badges3838 silver badges6565 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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.

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

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",
}

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

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!

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!');
            }
        });
    }
});

本文标签： javascriptDynamically adding TinyMCEeditor to textarea kills other instancesStack Overflow