WP Editor - wp_editor() 在 ajax 调用中未正确显示

Posted 2023-05-08

【中文标题】WP Editor - wp_editor() 在 ajax 调用中未正确显示

【英文标题】：WP Editor - wp_editor() is not showing properly on ajax call

【发布时间】：2016-03-11 17:31:13

【问题描述】：

我正在创建一个 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]);

上面的代码就是这样做的：

【问题讨论】：

我现在的代码一切正常。只是编辑器不工作。

我创建了一个动态加载 wp 编辑器的帖子here。

我创建了一个动态创建WP编辑器here的帖子。

【参考方案1】：

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

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

就在“添加产品”按钮下方，从那里进行 ajax 调用，使用 php 代码打印一个编辑器并将其显示设置为无，这样编辑器就不会出现在页面上。

例如

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

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();

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

【讨论】：

似乎是一个不错的解决方案...但是如何从 ajax 响应中设置其内容？

CKEDITOR.instance.[CKEDITOR 中使用的名称].setData(ajaxResponse);可以在任何 js 文件中使用，只要它是在加载 ckeditor.js 之后出现的。

【参考方案2】：

我想我通过使用 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 替换为一个新的，然后调用 QTags 函数。所有按钮都应该出现。

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