Question

我有一个教学大纲表单，可以有1到n个用户可以输入的部分。我有JS，点击克隆前一个字段集及其内容，递增id，将字段集附加到表单，然后将添加按钮附加到表单的末尾，并将提交按钮移动到结尾。不幸的是，当连接到TinyMCE克隆的textarea时，即使它与textarea具有不同的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添加和删除操作无效。原始textarea仍然可以编辑，但新的不是。我错过了一招吗？

Answer 1

我根本不使用tinymce.EditorManager命令克隆文本区域后。我删除tinyMce div并“取消隐藏”文本区域：

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

，然后执行经典的JavaScript命令，在短暂的超时后将tinyMce添加到我的文本区域：

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

克隆textarea以便TinyMCE重新连接到克隆

1 个答案: