Редактор WP - wp_editor() не отображается правильно при вызове ajax

Я создаю плагин 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]);

И приведенный выше код делает следующее:

Ответ 1

Очевидно, что wp_editor не будет отображаться, поскольку вы делаете вызов ajax, который возвращает только ответ ajax, но не редактор wp, который создается javascript на этой странице. Короче говоря, вызов ajax может получить ответ на стороне сервера, но не редактор javascript, который построен на стороне клиента и нуждается в обработчике javascript для обработки.

Ниже приведен пример примера того, что можно сделать для работы редактора.

чуть ниже кнопки "добавить продукт", откуда выполняется ajax-вызов, печатайте редактор, используя php-код, и не устанавливайте его отображение на none, поэтому редактор не появляется на странице.

например.

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

Функция php для ответа ajax должна возвращать только текстовое содержимое. Не сам редактор, и он должен выглядеть так.

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();
```
}
когда получен ответ текстового содержимого, используя jQuery, создайте клон "wp-editor-wrapper" div и добавьте его вместо textarea и установите его содержимое из ответа ajax.

Ответ 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-вызов завершен, попробуйте скопировать это свойство, заменить идентификатор на новый и вызвать функцию QTags. Все кнопки должны появиться.

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