CODEWITHSUNDEEP
jqueryajaxtinymce
TheLettuceMaster
TheLettuceMaster

Reputation: 15734

TinyMCE Is only loading once - using AJAX to add/remove textarea

Here is my code:

function OpenContentBuilder()
{

    $.post("tools/tools_builder.php", {
        _open_content_builder : 1
    }, function(data)
    {
        $("#container").html(data);

        // Go Back to Course Section List - Button
        $("#course_builder_go_back").click(function()
        {
            tinyMCE.execCommand('mceRemoveEditor ', false, 'target_builder');
            InitCourseContentList()
        });



        if (tinymce.editors.length < 1) {

            tinymce.init({
                mode : "none",
                width : 680,
                height : 300,
                selector : "textarea#target_builder",
                theme : "modern"
            });
        } else if (tinymce.editors.length > 0){
                tinyMCE.execCommand('mceAddEditor', true, 'target_builder');
        } else {
            alert("Cannot load editor!");
        }

    });

}

The textarea is built in this line:

$("#container").html(data);

The html brought in for it looks like this:

<div>
    <textarea  id="target_builder" ></textarea>
</div>

the first time it loads, it works. If I hit the back button go somewhere else on the page, and come back (the entire page url never changes: it is done with ajax), the textarea is there, the editor is not.

When I do an alert in the tinymce.editors.length > 0 test, it shows (on the second or more load).

I see many questions that reference this and say you have to remove and add the instance with the execCommand. Am I using this correctly?

Upvotes: 1

Views: 2402

Answers (2)

Marijn
Marijn

Reputation: 81

The solution I fount is that you have to remove the tinymce before you call them again So on execution add tinyMCE.remove(); to remove them. On the next call the Tinymce will be there.

Upvotes: 8

TheLettuceMaster
TheLettuceMaster

Reputation: 15734

The problem was I was not removing focus first before removing the editor instance.

I did this:

    if ( typeof tinyMCE != 'undefined') {
        tinyMCE.execCommand('mceFocus', true, 'target_builder');
        tinyMCE.execCommand('mceRemoveEditor', true, 'target_builder');
    }

Upvotes: 1

Related Questions