Редактор 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]);

И приведенный выше код делает это:

введите описание изображения здесь


wordpress php jquery ajax wp-editor
person Omer    schedule 07.12.2015    source источник
comment
Все работает нормально с кодом, который у меня есть. Просто редактор не работает.   -  person Omer    schedule 07.12.2015
comment
Я создал пост для динамической загрузки редакторов wp здесь .   -  person Bjorn    schedule 20.12.2019
comment
Я создал пост для динамического создания редактора WP здесь .   -  person Bjorn    schedule 20.12.2019

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

e.g.

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

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

    }

  2. когда получен ответ текстового содержимого, используя jQuery, создайте клон div "wp-editor-wrapper" и добавьте его вместо textarea и установите его содержимое из ответа ajax.

person Alpesh Panchal    schedule 20.12.2015
comment
Кажется, хорошее решение... Но как установить его содержимое из ответа ajax? - person Omer; 21.12.2015
comment
CKEDITOR.instance.[имя, используемое в CKEDITOR].setData(ajaxResponse); Может использоваться в ЛЮБОМ файле js, если он появляется после загрузки ckeditor.js. - person Alpesh Panchal; 22.12.2015

arrow_upward
0
arrow_downward

Думаю, я нашел более элегантное решение, используя функцию 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"});
person Alexander Tsaplev    schedule 13.04.2019