2

I am trying to re-bind tinyMCE to textarea which is generated dynimically with ajax. My tinymce looks like this:

tinyMCE.init({
    selector : "textarea",
    plugins: "emoticons link",  
    menubar: false,
    toolbar: 'undo redo | bold italic underline | fontsizeselect | link | emoticons',    
    height: 240,
    force_br_newlines : true,
    force_p_newlines : false,
    forced_root_block : '',
    paste_as_text: true,

});

My ajax for sending data:

$('body').on('submit', '.comment_form', function (e) {
    e.preventDefault();
    tinyMCE.triggerSave(); // save TinyMCE instances before sending data
    ....
    $.ajax({
        url: 'comment.php',
        type: 'POST',
        data: {             
                comment_name:comment_name,              
                comment:comment,                                                                    
                },
        beforeSend: function(){
            tinyMCE.remove(); // remove tiny mce form textarea
        },      

        success: function(data){

            $('.result').html(data);            
            $('.modal').modal('hide'); // close modal   

            $(".comments-body").load(" .comments-body > *"); // reload div comments-body from comments  


        },
        complete:function(){
            tinyMCE.init(); // rebind tinymce to textarea       
        }
    });

});



The div with class comments-body has several forms with textareas and is reloaded after success. But tinymce is not binded anymore after this reload!

I know that i have to use tinyMCE.remove(); and tinyMCE.init(); and i tried it in my ajax beforeSend and complete but without result. Anybody idea what i am doing wrong? I am using the free API of tinymce 5

Jack Maessen
  • 1,780
  • 4
  • 19
  • 51

0 Answers0