jQueryクローンフォームフィールドグループwp_editor（）関数をテキストエリアに追加

Question

CPTメタボックスではwp_editor()を使用しています。最初のものはPHP関数を使ってロードしています。しかし、jQuery経由でフォームフィールドをクローンすると、wp_editorではなく単純なテキストエリアが追加されます。

だからhere私はscriptが見つかりました。これはwp_editorをjavascriptで読み込みます。しかし、フォームフィールドを複製/追加しようとすると、wp_editorが読み込まれるのではなく、単純なテキストエリアが読み込まれます。

私は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 
}); 

・ホープ、このことができます！