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

显然，当您进行ajax调用时，wp_editor不会显示，它只返回ajax响应，而不是由该页面上的javascript构建的wp编辑器。简而言之，ajax 调用可以获得服务器端文本响应，但不能获得构建在客户端的 javascript 编辑器，需要 javascript 处理器来处理。

以下是 suedo 示例，说明如何使编辑器正常工作。

1. 就在“添加产品”按钮下方，从进行 ajax 调用的地方，使用 php 代码打印编辑器并将其显示设置为无，以便编辑器不会出现在页面上。

例如

<div class="wp-editor-wrapper" style="display: none;">
     <?php wp_editor("Test Content", "textarea" . $prod_id, array('textarea_name' => 'text')); ?>
</div>

2. 用于ajax响应的php函数应该只返回文本内容。不是编辑器本身，它应该看起来像这样。

   公共函数 add_product() {

       // Get product id
       $prod_id = filter_input(INPUT_POST, 'pid');
   
       // if $prod_id is used here, use it to get content
       echo "Test Content";
       wp_die();
   

   }

3. 当收到文本内容的响应时，使用 jQuery 创建“wp-editor-wrapper”div 的克隆并将其添加到文本区域的位置，并从 ajax 响应设置其内容。