克隆文本区域以便 TinyMCE 重新连接到克隆

Question

我有一个教学大纲表格，其中包含用户可以输入的 1 到 n 个部分。我有 JS，单击它会克隆以前的字段集及其内容，递增 id，将字段集附加到表单，然后将添加按钮附加到表单的末尾，并将提交按钮移到末尾。不幸的是，当连接到 TinyMCE 的文本区域克隆时，即使它与克隆的文本区域具有不同的 ID，它也不会变得可编辑。

https://jsfiddle.net/etmftLoe/

$("button[name='add']").on("click",function(){
    var fieldset = $(this).parents("fieldset");

    //remove tinymce
    fieldset.find("textarea").each(function(){
        tinymce.EditorManager.execCommand('mceRemoveEditor',true, this.id);
    });
    var form = $(this).parents("form");
    var n = fieldset.parent().children("fieldset").length;

    $(this).detach();
    var clone = fieldset.clone(true,true);
    clone.find("input").each(function() {
        this.id = this.id.replace(/\d+$/, "") + n;
        this.value = "";
    });
    clone.find("label").each(function() {
        this.setAttribute("for", this.getAttribute("for").replace(/\d+$/, "") +n);  
    });
    clone.find("textarea").each(function() {
        this.id = this.id.replace(/\d+$/, "") + n;
        this.value = "";
        //add tinymce to clone
        tinymce.EditorManager.execCommand('mceAddEditor',true, this.id);
    });
    //add tinymce to original
    fieldset.find("textarea").each(function(){
        tinymce.EditorManager.execCommand('mceAddEditor',true, this.id);
    });
    clone.appendTo(form);
    $(this).appendTo(clone);
    form.find(':submit').appendTo(form);
});

我想我需要从源字段集中删除控件，克隆它，然后将它添加回源和克隆。但是我尝试使用 tinymce.EditorManager.execCommand 添加和删除是无效的。原始文本区域仍可编辑，但新文本区域不可编辑。我是不是漏掉了什么技巧？

Answer 1

我根本不使用 tinymce.EditorManager 命令克隆文本区域后。我删除了 tinyMce div 和 "unhide" 文本区域：

$(this).parent().find('div.mce-tinymce').remove();
$(this).show();

然后执行经典的 JavaScript 命令将 tinyMce 添加到我的 textarea 短暂超时后:

setTimeout(function() {
  tinymce.init({
    selector: <your selector>,
    ...
  });
}, 50);

克隆文本区域以便 TinyMCE 重新连接到克隆

Cloning a textarea so TinyMCE reconnects to the clone

jquery

tinymce