jQuery复制表单字段组将wp_editor（）函数添加到textarea

Question

在CPT元组中，我使用的是wp_editor()。第一个是通过php函数加载。但是，当我通过jQuery克隆表单域时，它不会添加wp_editor，而是添加简单的textarea。

所以here我发现了一个script，它通过javascript加载wp_editor。但是，当我试图克隆/追加表单字段时，它不会加载wp_editor，而是加载简单的textarea。

我相信DOM不加载wp_editor() js函数。那么有谁能告诉我如何为克隆的字段加载wp_editor？

jQuery的

// Just to cross check. This is loading wp_editor on page load 
jQuery('.cn-wp-editor').wp_editor(); 

// wp_localization 
var title = cn_fields.title; 
var teditor = cn_fields.editor; 

// adding incremental id 
var i = 1; 

// clone fields 
$('#add_item').on('click', function() { 
    i++; 
    $('#fieldgroup').append('<div class="formgroup"><div class="card-meta-box"><label for="card_title" class="card-field-label">Item Title</label><input type="text" name="' + title + '[]" id="' + title + i +'"></div><div class="card-meta-box"><textarea name="' + teditor + '[]" id="' + teditor + i +'" class="cn-wp-editor"></textarea></div><button class="remove">x</button></div><!-- formgroup -->'); 
    return false; //prevent form submission 
}); 

// remove fields 
$('#fieldgroup').on('click', '.remove', function() { 
    $(this).parent().remove(); 
    return false; //prevent form submission 
    i--; 
}); 

Answer 1

你需要重新初始化wp_editor()当你复制/复制 领域。您的代码在页面加载时不能作为DOM中的 中的复制/创建字段工作，因此wp_editor()未附加到那些 新字段。

检查这个代码：

$('#add_item').on('click', function() { 
    i++; 
    $('#fieldgroup').append('<div class="formgroup"><div class="card-meta-box"><label for="card_title" class="card-field-label">Item Title</label><input type="text" name="' + title + '[]" id="' + title + i + '"></div><div class="card-meta-box"><textarea name="' + teditor + '[]" id="' + teditor + i + '" class="cn-wp-editor"></textarea></div><button class="remove">x</button></div><!-- formgroup -->'); 
    $('#' + title + i).wp_editor(); //<------ add this line 
    return false; //prevent form submission 
}); 

希望这有助于！