daker
daker

Reputation: 3540

Initiating TinyMce on jQuery UI dialog

A click event on #open_dialog triggers a jQuery UI dialog with a ajax request to /ajax/request/url/

I want to initiate Tinymce on a textarea that is beeing sent back from the ajax request.

With the following code I get the log message "ajax done!" every time i click #open_dialog (and the ajax request is done) but Tinymce is only loaded the first time the dialog is opened. How come? And how do I initiate tinymce every time the dialog is loaded?

$('#open_dialog').click(function() {
    $.when($.ajax("/ajax/request/url/")).done(function() {
        console.log("ajax done!");  

        tinymce.init({selector:"textarea",
            toolbar: "undo redo cut copy paste | bold italic underline | bullist numlist | table | styleselect | removeformat ",
            plugins: "paste, table",
            paste_word_valid_elements: "b,strong,i,em,h1,h2,table,tr,td,th",
            menubar: false,
            statusbar: true,
            resize: "both"
        });
    });
});

Upvotes: 1

Views: 631

Answers (1)

daker
daker

Reputation: 3540

Finally solved it by removing old DOM and old editors. ee_body below is the DOM id of the textarea.

$(document).ready(function() {
    tinymce.init({
        mode:"none",
        toolbar: "undo redo cut copy paste | bold italic underline | bullist numlist | table | styleselect | removeformat ",
        plugins: "paste, table",
        paste_word_valid_elements: "b,strong,i,em,h1,h2,table,tr,td,th",
        menubar: false,
        statusbar: true,
        resize: "both"
    });

});

$('#open_dialog').click(function(){
    //Remove old editors and DOM-elements 
    tinymce.EditorManager.execCommand("mceRemoveEditor", false, "ee_body");
    $('#ee_body').remove();

    // When ajax request to new email is done, load Tinymce 
    $.when($.ajax("/ajax/request/url/")).done(function() {
        tinyMCE.execCommand("mceAddEditor", true, "ee_body");   
    }); 
});

Upvotes: 2

Related Questions