CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Carl Peyton
Carl Peyton

Reputation: 43

TinyMCE not working on boostrap modal data-dismiss and then reopen

I am using boostrap 3 and tinymce 4. I am trying to put tinymce in a modal and it work fine, but when I use data-dismiss on the modal and then reopen it again tinymce does not show in the modal window. code as follows:

for tinymce 

tinymce.init({
    selector: "#tinytext",
    plugins: "image code autolink link charmap insertdatetime table media textcolor emoticons",
    browser_spellcheck: true,
    //image_dimensions: false,

    toolbar: ["undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify ",
        " bullist numlist outdent indent | link image | forecolor backcolor | emoticons"]
});

for modal cancel

 $('#Modal').on('hidden.bs.modal', function () {

    $(this).removeData("bs.modal").find(".modal-content").empty();
});

I would like to be able to close the modal and reopen it again with tinymce still attach to #tinytext

Upvotes: 0

Views: 1144

Answers (1)

Carl Peyton
Carl Peyton

Reputation: 43

I figured it out. You must remove the tinymce instance in the modal before you try and reload it again. on my modal when I call the 'hidden.bs.modal' I need to close any instance of tinymce that was used in the closing modal.

code: $('#Modal').on('hidden.bs.modal', function () {

tinymce.remove("#tinytext);
$(this).removeData("bs.modal").find(".modal-content").empty();

});

once you do that, when you reopen the modal, the tinymce instance will reinitialize with no problem.

Upvotes: 3

Related Questions