WP Editor — wp_editor () не отображается должным образом при вызове ajax

Question

WP Editor — 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]);

И код выше делает это:

12

ajax jquery php wordpress wp-editor

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Очевидно, что 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 должна возвращать только текстовое содержимое. Не сам редактор и должен выглядеть так.

публичная функция 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, создайте клон div «wp-editor-wrapper» и добавьте его вместо textarea и установите его содержимое из ответа ajax.

3