Почему в виджете wordpress при добавлении нового поля редактора не активируется начальная вкладка визуально?
Создал wordpress виджет с повторяющимися полями в которых в качестве текстовых элементов представлены с расширенным функционала стандартного редактора wp_editor.
В момент добавления нового блока с полями по непонятной мне причине в поле редактора активна и работает для набора только вкладка Текст, тогда как изначальная, которая отвечает за визуальное отображение - нет. Показал на скрине (там где активна вкладка визуально, не устанавливается курсор и нет возможности редактировать, а там, где активна вкладка текст - можно).
Если запись сохранить, то в сохраненном виджете и текст, то уже обе вкладки будут доступны для редактирования. Как решить изначальную проблему с вкладкой визуально? Понимаю, что вопрос из области 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; } } |
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; } }
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос