WordPress: Добавить кнопку в редактор TinyMCE (Classic Editor)

Раньше, для добавления в редактор TinyMCE (Classic Editor) я использовал плагин Easy Tinymce Editor Add Button, но в WordPress 5.5 он перестал работать.
Можно было создать кнопки самому. Для этого мне пришлось бы ковырять кучу файлов, включая functions.php.
Этого делать я не стал.
Также я не смог найти нужный работающий плагин, поэтому воспользовался Кодексом WordPress.

Здесь я использую часть своих собственных кнопок, например для блоков.

 

Таким образом у меня получился следующий сниппет:

// add more buttons to the html editor
function appthemes_add_quicktags() {
  if (wp_script_is('quicktags')){
?>
  <script type="text/javascript">
  /* QTags.addButton( 'ID_', 'Button Title', 'Opening tag: <div class="info">', 'Closing tag: </div>'); */
  QTags.addButton( 'ID_Pre', 'pre', '<pre>', '</pre>');
  QTags.addButton( 'ID_Info', 'INFO', '<div class="info">', '</div><p>&nbsp;</p>');
  QTags.addButton( 'ID_Checked', 'CHECKED', '<div class="checked">', '</div><p>&nbsp;</p>');
  QTags.addButton( 'ID_Warning', 'WARNING', '<div class="warning">', '</div><p>&nbsp;</p>');
  QTags.addButton( 'ID_Error', 'ERROR', '<div class="error">', '</div><p>&nbsp;</p>');
  QTags.addButton( 'ID_Cmd', 'CMD', '<pre class="textbox">', '</pre>'); 
  QTags.addButton( 'ID_Marker', 'MARKER', '<span class="marker">', '</span>'); 
  QTags.addButton( 'ID_LBr', '[', '&#91;', ''); 
  QTags.addButton( 'ID_RBr', ']', '&#93;', ''); 
  QTags.addButton( 'ID_Menu', 'MENU', '<span class="menuitem">', '</span>'); 
  QTags.addButton( 'ID_PS', 'PS', '<pre class="psbox">', '</pre>'); 
  QTags.addButton( 'ID_PS_Warning', 'PS_Warning', '<pre class="psbox_warning">', '</pre>'); 
  QTags.addButton( 'ID_PS_Error', 'PS_Error', '<pre class="psbox_error">', '</pre>'); 
  QTags.addButton( 'ID_Key', 'KEY', '[key]', '[/key]'); 
  QTags.addButton( 'ID_LT', '<', '&lt;', ''); 
  QTags.addButton( 'ID_GT', '>', '&gt;', '');
  QTags.addButton( 'ID_quot', '&quot;', '&quot;', ''); 
  QTags.addButton( 'ID_Arrow', '&#9654;', '&#9654;', '');
  </script>
<?php
  }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

Для его активации всё же потребуется плагин для сниппетов: Code Snippets. В нём нужно будет создать новый снипет и вставить в него мой код. После активации в классическом редакторе появятся новые кнопки.

Данный код использует мои правила CSS, поэтому не все кнопки будут работать у вас!

 
WordPress: Добавить кнопку в редактор TinyMCE (Classic Editor)

Некоторые кнопки можно было бы объединить в кнопки с раскрывающимся списком, как в этом примере. Но слишком уж запутанно всё.
Позже попробую сделать так, если появится желание разбираться.

 

Примечание для версии WordPress 6.0+

Из-за изменений в движке WordPress версии 6.0, пришлось немного изменить код и добавить функцию window.addEventListener(). Подробности в этой заметке.



WordPress: Добавить кнопку в редактор TinyMCE (Classic Editor): 3 комментария

  1. Фото аватараВиктор

    Исчезли кнопки после обновления на WordPress 6.0. Что делать?
    P.S.
    Использую классический редактор через плагин «Classic Editor»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *