我有一个定制开发的主题，而且非常复杂。我拥有的一件事是多个内容区域，用户可以在其中为特定选项卡指定内容。我通过该wp_editor()功能加载了WordPress编辑器的多个实例。它运作完美。（这一切都在管理员端，在“页面”帖子类型中）

但是，我开始进行一些改进，包括动态添加/删除标签的功能（之前，我在页面上加载了6个编辑器）。用户可能有1-7个标签。

用户添加选项卡时，需要向页面添加编辑器的实例。但是，无论我尝试什么，都无法正确加载和显示它。

到目前为止，这是我尝试过的两件事：

1. 创建一个包含管理员引导程序的php文件，然后使用加载编辑器wp_editor()。然后，我使用jQuery $.load调用该页面，并将生成的HTML包含在它需要显示的区域中。但是，这实际上并不起作用，因为编辑器的格式化按钮消失了（值得注意的是，直接拉动页面，编辑器可以完美显示和运行）
2. 将编辑器加载到页面上的隐藏div内，然后在添加标签后，使用jquery将其移动到位。这将使编辑器保持原样加载，但是您不能使用任何编辑器按钮（它们显示但不执行任何操作），也不能将光标置于文本区域（但是，很奇怪，切换到HTML模式允许输入文字并与HTML模式按钮进行一些交互）

所以问题是，有人通过AJAX调用添加编辑器很幸运吗？有什么建议吗？

为了显示快速标签，您需要在ajax oncomplete处理程序中重新实例化它们。

quicktags({id : 'editorcontentid'});

我的ajax成功处理程序如下所示；

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

我设法通过首先调用一个静态函数来加载编辑器，该静态函数创建编辑器并将其缓存为变量。我在init上运行编辑器创建方法。这似乎让wordpress占用了所有必需的脚本。

重要的是，在创建编辑器实例时，将其设置为使用tinymce，这样一来，tinymce js文件也将被入队。

经过努力，在添加新元素后的回调中找到了可行的解决方案：

tinymce.execCommand( 'mceAddEditor', true, element.id );

奇怪的是，Codex内部零文档。

最后，工作解决方案：

在wordpress中添加操作，说一句话My_Action_Name（也请注意，textarea ID My_TextAreaID_22）：

add_action('wp_ajax_My_Action_Name', function(){
    wp_editor( $_POST['default_text'], 'My_TextAreaID_22',      $settings = array( 'tinymce'=>true, 'textarea_name'=>'name77', 'wpautop' =>false,   'media_buttons' => true ,   'teeny' => false, 'quicktags'=>true, )   );    exit;
});

现在，在Dashboard中，执行以下功能（注意，使用of My_TextAreaID_22和My_Action_Name）：

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Get default Wordpress SETTINGS  ( I cant confirm, but if you will need to change target ID, then add this line:  My_New_Global_Settings.selector = "My_TextAreaID_22";   )
    jQuery.post(ajaxurl,
        { action: "My_Action_Name",     default_text: "Hello World"}, 
        function(response,status){ 
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
            // tinyMCE.execCommand( 'mceAddEditor', true, element.id );
        }
    );

}   
start_Ajax_request();     // < ---- EXECUTE

添加ajax textarea后，您需要再次调用编辑器init，我这样做是这样的：

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

然后在ajax之后调用函数，如下所示：

$('#my_new_textarea_container').html(response).tinymce_textareas();

来自github上 @toscho的可用解决方案。他还在此处提出了一个问题，得出了不错的结果，更多信息请参见他的答案。

使用此代码，希望对您有所帮助：

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

更多细节可以在这里找到。

我以这种方式管理它：

1. 首先，您需要在主页上调用wp_editor，然后从此处调用ajax。但是您必须将其包装在隐藏的div中：

    <div style="display:none">
    <?php
    wp_editor( '', 'unique_id', array(
        'media_buttons' => false,
        'textarea_rows' => 10,
        'teeny' => true,
    ) );
    ?>
    </div>

ID必须是随机且唯一的。设置必须与ajax编辑器中的设置相同。

2. 其次，您需要在ajax响应中调用此方法：

wp_editor( '', '[set id as you need]', array(the same settings as in the main page) ); _WP_Editors::editor_js(); //this print editor init code

这将在管理页面上起作用。

通过JS AJAX将新的wp编辑器附加到容器中：

1）在functions.php中创建wp_ajax函数以返回wp_editor

2）创建jQuery脚本以请求新的文本编辑器，并将其附加到容器（在这种情况下，当按下按钮时）

PHP文件

function yourprefix_get_text_editor() {
    $content = ""; // Empty because is a new editor
    $editor_id = $_POST["text_editor_id"]; // Random ID from AJAX JS call
    $textarea_name = $_POST["textarea_name"]; // Name from JS file
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Mandatory wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

JS脚本（jsfile.js）

jQuery(function($) {
$("someelement").click(function(e) { // To Add an Editor from a button click
    var target = themeajax.ajax_url; // Passed from wp_localize_script
    var editor_id = "editorid"; // Generate this dynamically
    var textarea_name = "textareaname" // Generate this as you need
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Use your logic to get the container where you want to append the editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

入队脚本调用：

function yourprefix_admin_scripts($hook) {
    wp_enqueue_script('your-slug', get_stylesheet_directory_uri() . '/path/to/jsfile.js', array('jquery'), null, true);
    wp_localize_script('your-slug', 'themeajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'yourprefix_admin_scripts');