Как передать содержимое wp_editor с помощью jQuery

На чтение 3 мин Опубликовано 21.12.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Создание редакторов
Шаг 2: Извлечение содержимого с помощью jQuery
Шаг 3: Настройка ThickBox
Дополнительные советы
Заключение

Вопрос или проблема

Я хочу добавить содержимое wp_editor с помощью jquery.

Я скрыл wp_editor, который нужно отобразить в thickbox при нажатии на одну из кнопок.

<div class="hidden-editor-container" style = "display: none;">
    <?php wp_editor($page_content , 'hidePageContent'); ?>
</div>

Как я могу показать содержимое этого редактора в thickbox WordPress? Например, в следующем div (show-editor-container)

<div class="show-editor-container">
    <?php wp_editor('' , 'editPageContent'); ?>
</div>

Я пробовал добавить следующий код в мой js файл, но без результата:

var page_content = $("input#page_content").val();
$('.editPageContent').append(page_content);

Спасибо заранее!

Вам нужно получить доступ к объекту tinymce вот так:

tinymce.get("ваш_ID_текстовой_области").setContent("Поместите сюда ваше содержимое");

В качестве практического примера – если вы объявили свой wp_editor вот так:

wp_editor( "", "special_content", array() );

То вызов tinymce будет выглядеть вот так:

tinymce.get("special_content").setContent("Поместите сюда ваше содержимое");

Бонусные детали: если вы хотите получить содержимое из редактора, используйте эту команду:

let editorContent = tinymce.get("ваш_ID_текстовой_области").getContent();

С уважением,
Брайан

Ответ или решение

Чтобы передать содержимое редактора wp_editor с помощью jQuery и отобразить его в ThickBox в WordPress, выполните следующие шаги. Этот процесс состоит из создания скрытого редактора, извлечения его содержимого с помощью JavaScript и затем его установки в другой редактор, который будет отображаться в ThickBox.

Шаг 1: Создание редакторов

Предположим, у вас есть два редактора: скрытый и тот, который будет отображаться в ThickBox. Создайте их следующим образом:

<div class="hidden-editor-container" style="display: none;">
    <?php wp_editor($page_content, 'hidePageContent'); ?>
</div>

<div class="show-editor-container">
    <?php wp_editor('', 'editPageContent'); ?>
</div>

Шаг 2: Извлечение содержимого с помощью jQuery

Теперь вам нужно извлечь содержимое из скрытого редактора. Для этого используйте метод tinymce.get() из TinyMCE, который будет управлять вашими редакторами. Убедитесь, что у вас установлен jQuery и библиотека TinyMCE, так как они необходимы для этой операции.

Пример кода для вашего JavaScript файла:

jQuery(document).ready(function($) {
    // Обработчик события на кнопку, для показа редактора в ThickBox
    $('#your-button-id').on('click', function() {
        // Получение содержимого скрытого редактора
        var hiddenContent = tinymce.get('hidePageContent').getContent();

        // Установка содержимого в другой редактор
        tinymce.get('editPageContent').setContent(hiddenContent);

        // Открытие ThickBox
        tb_show('Редактирование', '#TB_inline?inlineId=thickbox-content', false);
    });
});

Шаг 3: Настройка ThickBox

Не забудьте заполнить контент вашего ThickBox. Например:

<div id="thickbox-content" style="display:none;">
    <div class="show-editor-container">
        <?php wp_editor('', 'editPageContent'); ?>
    </div>
</div>

Дополнительные советы

Убедитесь, что ID текстового поля корректны. Для tinymce.get() должны использоваться такие же ID, которые были указаны в функции wp_editor.
Загрузите необходимые скрипты. Убедитесь, что у вас зарегистрированы и подключены jQuery и скрипты для работы с ThickBox и TinyMCE.

Заключение

При правильной реализации вы сможете легко передавать содержимое редактора через jQuery и отображать его в новом редакторе внутри ThickBox. Это может значительно улучшить пользовательский интерфейс вашего сайта на WordPress, позволяя пользователям редактировать контент прямо из модального окна. Пользуйтесь современными веб-технологиями и приятного кодирования!