Задать вопрос
@ligisayan

Почему в виджете wordpress при добавлении нового поля редактора не активируется начальная вкладка визуально?

Создал wordpress виджет с повторяющимися полями в которых в качестве текстовых элементов представлены с расширенным функционала стандартного редактора wp_editor.

В момент добавления нового блока с полями по непонятной мне причине в поле редактора активна и работает для набора только вкладка Текст, тогда как изначальная, которая отвечает за визуальное отображение - нет. Показал на скрине (там где активна вкладка визуально, не устанавливается курсор и нет возможности редактировать, а там, где активна вкладка текст - можно).

65a257b08115c679581656.png

Если запись сохранить, то в сохраненном виджете и текст, то уже обе вкладки будут доступны для редактирования. Как решить изначальную проблему с вкладкой визуально? Понимаю, что вопрос из области event delegation при добавлении элемента в DOM дерево, но какая настройка необходима, не получается определить.

Упрощенный код виджета со всем необходимым функционалом
class simmakersTableWidget extends WP_Widget {
 
    /*
     * создание виджета
     */
    function __construct() {
        parent::__construct(
            'template_table_widget', 
            'Таблица', // заголовок виджета
            array( 
                'description' => ('Добавление таблицы с данными'),  // описание
                'panels_groups' => array('template') 
            )
        );

        wp_enqueue_editor();

    }

    ...

    /*
     * бэкэнд виджета
     */
    public function form( $instance ) {

        <script type="text/javascript">
        jQuery(document).ready(function( $ ){
            $( '#add-row' ).on('click', function() {
                var row = $( '.empty-row.screen-reader-text' ).clone(true);
                row.removeClass( 'empty-row screen-reader-text' );
                row.insertBefore( '#repeatable-fieldset-one .block:last' );
                
                $(row.find('.repeatable-textarea')).each(function(){

                    wp.editor.initialize( this.id, {
                        tinymce: {
                            wpautop: true
                        }
                    });
                });

                return false;
            });

            $( '.remove-row' ).on('click', function() {
                $(this).parents('.block').remove();
                return false;
            });

            document.querySelectorAll('.repeatable-textarea').forEach(function(e){
                
                var id = e.getAttribute( 'id' );

                wp.editor.initialize( id, {
                    tinymce: {
                        wpautop: true
                    },
                    quicktags: true,
                    mediaButtons: true
                });
            });

        });

        </script>

        <div id="repeatable-fieldset-one">
        <!-- пустой блок скрыт для jQuery -->
            <div class="block empty-row screen-reader-text">
            <?php
                for($i=0;$i<3;$i++) { ?>

                <label for="<?php echo $this->get_field_id( 'tbody' ); ?>[]">Колонка <?php echo $i+1; ?></label>
                <textarea id="<?php echo $this->get_field_id( 'tbody' ).mt_rand(); ?>" class="repeatable-textarea" cols="55" rows="5" name="<?php echo $this->get_field_name( 'tbody' ); ?>[]"></textarea>

            <?php } ?><a class="button remove-row" href="#">Удалить блок</a></div>
        </div>
        <p><a id="add-row" class="button" href="#">Добавить элемент</a></p>
        </div>
    }


    /*
     * сохранение настроек виджета
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['tbody'] = ( ! empty( $new_instance['tbody'] ) ) ? $new_instance['tbody'] : '';
        return $instance;
    }

}
  • Вопрос задан
  • 32 просмотра
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы