Инлайн-редактирование с wp_editor и tinymce (проблема с textarea)

Содержание

Вопрос или проблема
Ответ или решение
Объяснение кода:
Замечания:

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

Я хочу использовать новый встроенный редактор от tinymce с функцией wp_editor в wordpress.

Вот информация о том, как настроить встроенный редактор tinymce http://www.tinymce.com/tryit/inline.php

Код, который я использую для вызова wp_editor, выглядит следующим образом:

$editor_settings = array('dfw' => true,'quicktags' => false);
wp_editor( $postcontent, 'postcontent', $editor_settings );

А в functions.php у меня следующее для включения встроенного редактирования:

function mce_inline( $init ) {

    $init['inline'] = true;

    return $init;
}
add_filter('tiny_mce_before_init', 'mce_inline');

Проблема в том, что wp_editor вызывает редактор и создает текстовое поле. Чтобы встроенный редактор tinymce работал правильно, нам нужно удалить текстовое поле и заменить его на элемент editable div, как указывает tinymce.com.

<div class="editable" style="width:100%; height:550px">
Это редактируемый элемент div.
</div>

Итак, мой вопрос: как можно настроить wp_editor, чтобы он заменял текстовое поле на элемент div?

Я все еще экспериментирую с этим, но вот как я избавился от нежелательного текстового поля:

if ( !is_admin() ) { //вы можете изменить это условие.

    //Я нашел фильтр в /wp-includes/class-wp-editor.php @249
    add_filter('the_editor', 'my_remove_editor_te');
    function my_remove_editor_te(){
        $editor="";
        return $editor;

        // или просто return;
    }

}

Вот как я инициировал свой редактор:

wp_editor( '', '', array(
    'textarea_rows' => '',
    'quicktags'     => false,
    'media_buttons' => false,
    'tinymce'       => array(
        'selector'         => '#comment-editable',
        'content_css'      => false,
        'inline'           => true,
    ),
) );

Вам также нужен div с ID #comment-editable или просто установите опцию селектора на ID или класс вашего контейнера DIV.

Я не совсем уверен в фильтре, который удаляет текстовое поле, так как это общий фильтр, он будет удалять текстовые области для wp_editor, пока это не панель администратора, вы можете столкнуться с проблемой, в таком случае измените условия, при которых этот фильтр инициализируется.

Если у вас есть другие идеи, поделитесь, пожалуйста.

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

Для реализации инлайнового редактирования с использованием TinyMCE и функции wp_editor в WordPress, необходимо заменить стандартное текстовое поле, которое генерирует wp_editor, на элемент <div> с классом editable. Давайте рассмотрим шаги и код, которые вам понадобятся для достижения этого.

Удаление стандартного текстового поля: Вы можете удалить текстовое поле, используя фильтр the_editor. Этот фильтр поможет вам убрать редактор, когда он не используется в админке. Однако, необходимо быть осторожным, чтобы не удалить редактор, когда он вам действительно нужен.
Создание инлайнового редактора: Мы создадим инлайновый редактор, который будет привязан к определенному <div> элементу. Это даст вам возможность редактировать контент непосредственно на странице.

Вот пример кода, который вам может помочь:

// В файле functions.php вашей темы

// 1. Удаляем стандартный редактор
if ( !is_admin() ) {
    add_filter('the_editor', 'my_remove_editor_te');
    function my_remove_editor_te(){
        return ''; // Убираем текстовое поле
    }
}

// 2. Инициализируем инлайновый редактор
function custom_inlinemce_editor() {
    echo '<div id="comment-editable" class="editable" style="width:100%; height:550px;">Ваш текст здесь.</div>';

    // Подключаем TinyMCE
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            tinymce.init({
                selector: '#comment-editable',
                inline: true,
                menubar: false,
                plugins: 'lists code',
                toolbar: 'undo redo | bold italic | bullist numlist outdent indent | code'
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_inlinemce_editor');

Объяснение кода:

Удаление текстового редактора: Мы используем фильтр the_editor для замены контента редактора на пустую строку, когда мы находимся не в админке. Это предотвращает создание текстового поля в вашем интерфейсе.
Создание инлайнового редактора:
- Мы создаем <div> с ID #comment-editable, что позволяет TinyMCE привязаться к этому элементу.
- В скрипте JavaScript мы инициализируем TinyMCE для элемента с селектором #comment-editable, устанавливая его в режим инлайнового редактирования. В этом скрипте также указаны плагины и инструменты, которые вы хотите использовать (например, списки, код).

Замечания:

Обязательно убедитесь, что у вас загружены все необходимые скрипты и стили TinyMCE на вашей странице.
Этот код следует добавить в файл functions.php вашей темы или в плагин, если вы разрабатываете его.
Если у вас многоразовое использование редактора на разных страницах, вам может понадобиться улучшить условия для фильтра the_editor.

Таким образом, используя приведённый выше метод, вы будете способны реализовать инлайн редактирование с помощью TinyMCE в WordPress, без отображения стандартного текстового поля.