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

顯然wp_editor不會出現，因為你正在進行ajax調用，它只返回ajax響應，而不是wp編輯器，它是由javascript在該頁面上構建的。 簡而言之，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函數應該只返回文本內容。 不是編輯器本身，它應該是這樣的。

   public function 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的克隆並將其添加到textarea的位置，並從ajax響應中設置其內容。

Answer 2

我想我通過使用window.QTags函數找到了更優雅的解決方案。 如果您嘗試從調試控制台調用tinyMCEPreInit，您應該能夠達到object的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"});