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