WP编辑器 - wp_editor（）在ajax调用上没有正确显示

Question

我正在创建一个WordPress插件。它具有在通过AJAX添加产品时显示编辑器的功能，但编辑器显示不正确。

用户可以根据需要添加任意数量的产品，因此请记住，将有多个wp_editor（）

请参阅随附的屏幕截图：

我使用了以下代码：

PHP

public function add_product() {

        // Get product id
        $prod_id = filter_input(INPUT_POST, 'pid');

        // WordPress WYSIWYG Editor
        wp_editor("Test Content", "textarea" . $prod_id, array('textarea_name' => 'text'));
        wp_die();
}

JQUERY

$('.add-prod').live('click', function () {

        var prod_id = $('.prod-id').val();
        var data = {
            action: 'add_prod',
            pid: prod_id
        };
        $('#update-msg').show();

        $.post(ajaxurl, data, function (result) {
            $('#the-list').append(result);
            $('#update-msg').hide();
        });

        return false;
});

我使用过互联网的解决方案但其部分工作并不完全。使用以下代码：

PHP

wp_editor($product->prod_desc, $textarea_id, array('textarea_name' => 'text'));
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

JQUERY

var eid = '#item-list';
switchEditors.go(eid, 'tmce')
quicktags({id: eid});
//init tinymce
tinyMCEPreInit.mceInit[eid]['elements'] = eid;
tinyMCEPreInit.mceInit[eid]['body_class'] = eid;
tinyMCEPreInit.mceInit[eid]['succesful'] = false;
tinymce.init(tinyMCEPreInit.mceInit[eid]);

上面的代码就是这样：

Answer 1

我想我通过使用window.QTags函数找到了更优雅的解决方案。 如果尝试从调试控制台调用tinyMCEPreInit，则应该可以访问对象的qtInit属性。

console.log(tinyMCEPreInit.qtInit);

它应该返回类似这样的内容

{
   editor_0: {id: "editor_1", buttons: "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close"}
}

因此，在完成ajax调用后，请尝试复制此属性，将一个id替换为一个新的ID，然后调用QTags函数。所有按钮都应该出现。

window.QTags({'id': `YOUR_NEW_ID_HERE`, 'buttons': "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close"});