Refresh wp_editor instance after cloning

While I was working on an extension within Redux Framework, I needed to initialize uninitialized copies of wp_editor instances to apply lazy loading. First I loaded uninitialized types of jQuery fields on the page, then I cloned them and and initialized them to have multiple forms in jQuery accordions. Everything was easy until I came to initialize wp_editor instance, because it was already initialized by wordpress, and you needed to give that field new parents, new id, and make it all work again. So, I developed this code to initialize a already-initialized wp_editor instance in a different DOM parent:

$(element).parents(".wp-editor-container").empty().append($(element));
        var ed_id = $(element).attr("id");
        //  find if an instance with the same id was created before, and remove it.
        // -------------------------------------------------------------------------
        // it's a critical point when the users adds a group item, and then removes it, and then re-adds the group,
        // then this item would have an already-created editor instance on the memory. To work things correctly, we
        // must remove it first completely from the memory, and then recreate it.
        for(var ed_instance_idx = tinymce.editors.length-1; ed_instance_idx >= 0; ed_instance_idx--){
            if(tinymce.editors[ed_instance_idx].editorId === ed_id){
                tinymce.remove(tinymce.editors[ed_instance_idx]);
            }
        }
        // create editor settings with using the dummy editor settings as reference
        tinyMCEPreInit.mceInit[ed_id] = JSON.parse(JSON.stringify(tinyMCEPreInit.mceInit[$(element).data("old-id")]));
        tinyMCEPreInit.mceInit[ed_id].body_class = ed_id;
        tinyMCEPreInit.mceInit[ed_id].elements = ed_id;
        tinyMCEPreInit.mceInit[ed_id].id = ed_id;
        tinyMCEPreInit.mceInit[ed_id].mode = "tmce";
        // initialize wp_editor tinymce instance
        tinymce.init(tinyMCEPreInit.mceInit[ed_id]);

        // create quicktags instance with using the dummy editor instance settings
        tinyMCEPreInit.qtInit[ed_id] =JSON.parse(JSON.stringify(tinyMCEPreInit.qtInit[$(element).data("old-id")]));
        tinyMCEPreInit.qtInit[ed_id].id = ed_id;
        // make the editor area visible
        $(element).addClass('wp-editor-area').show();
        // initialize quicktags
        new QTags(ed_id);
        QTags._buttonsInit();
        // force the editor to start at its defined mode.
        switchEditors.go(ed_id, tinyMCEPreInit.mceInit[ed_id].mode);

It copies it’s data from the dummy field (the clone source), so when cloning, don’t forget to retrieve it’s ID from somewhere (I used [highlight]$(element).data(“old-id”)[/highlight] inside the element to pass to the clone). Another option here is choosing the default editor to show:

tinyMCEPreInit.mceInit[ed_id].mode = "tmce";

line of this script shows that all the clones would return to “TinyMCE” editor as default visible edior on cloning. You may change that to “html” if you want to make the code/text editor as default after cloning.

4 comments

    1. my questrion above was bad, but your code is wrong for me.(HierarchyRequestError: DOM Exception 3: A Node was inserted somewhere it doesn’t belong.)

      I have the same problem, but I don’t have idea to reinit wp_editor.

Leave a Reply

Your email address will not be published. Required fields are marked *