How to add custom icon to header of (classic) Wordpress editor?

Question

JavaScript

I created several shortcodes for inserting on Wordpress pages, and in order not to forget them, I want to connect them to the editor header, I use the classic editor, i.e. not gutenberg. How to do it through a filter?

Answer 1

You have inside

function(){
          console.log('Onclick working!'); // working!
          this.ul.style.color = 'red'; //TypeError: this.ul is undefined
        };

this will refer to the button, as far as I understand. check through console.log what you have inside the function in this.
If I'm right, they usually do something like

var that = this;
this.btn.onclick = function(){
          console.log('Onclick working!'); // working!
          that.ul.style.color = 'red'; //TypeError: this.ul is undefined
        };

Answer 2

https://code.tutsplus.com/tutorials/guide-to-creat...
https://www.tiny.cloud/docs/quick-start/

functions.php

# Шорткод [youtube] - плеер youtube на странице сайта
function youtube_player($atts) {
  $atts = shortcode_atts( array(
        'vid' => 'k_okcNVZqqI', // id видео на ютубе
        'vol' => '20' // громкость от 0..100*/
    ), $atts );

  # генерируем уникальное id плеера
  $id = md5(uniqid(rand(),true));

  return "<div class=\"player_wrapper\"><div class=\"youtube_player\" data--video=\"id:'{$id}',videoId:'{$atts['vid']}',volume:'{$atts['vol']}'\"></div></div>";
}

add_shortcode('youtube', 'youtube_player');




# Добавление кнопок в редактор TinyMCE, проверка что находимся в админпанели
if ( is_admin() ) {
  add_action( 'init', 'setup_tinymce_plugin' );
}

# Дополнительные проверки, на предмет стоит ли вообще подключать плагин
function setup_tinymce_plugin() {

  # Проверяем, может ли залогиненный пользователь редактировать посты или страницы
  if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
    return;
  }

  # Проверяем пользуется ли пользователь визуальным редактором TinyMCE
  if ( get_user_option( 'rich_editing' ) !== 'true' ) {
    return;
  }

  # Подключаем фильтр
  add_filter( 'mce_external_plugins', 'wptuts_add_buttons' );
  add_filter( 'mce_buttons', 'wptuts_register_buttons' );
}


function wptuts_add_buttons( $plugin_array ) {
    $plugin_array['custom_link_class'] = get_template_directory_uri() . '/assets/js/tinymce.js';
    return $plugin_array;
}
function wptuts_register_buttons( $buttons ) {
    array_push( $buttons, 'dropcap', 'attention', 'youtube' );
    return $buttons;
}

tinymce.js

(function() {
  tinymce.create('tinymce.plugins.Wptuts', {
    init : function(ed, url) {
      ed.addButton('dropcap', {
        title : 'Буквица',
        cmd : 'dropcap',
        image : url + '/btn-dropcap.png'
      });

      ed.addButton('attention', {
        title : 'Выделение параграфа',
        cmd : 'attention',
        image : url + '/btn-attention.png'
      });

      ed.addButton('youtube', {
        title : 'Добавление youtube плеера на страницу',
        cmd : 'youtube',
        image : url + '/btn-youtube.png'
      });

      /* Добавляем в style.css и editor-style.css, стиль:
        .dropcap {
          float: left;
          font-size: 90px;
          padding-right: 7px;
          line-height: 72px; } */

      ed.addCommand('dropcap', function() {
        var selected_text = ed.selection.getContent();
        var return_text = '';
        return_text = '<span class="dropcap">' + selected_text + '</span>';
        ed.execCommand('mceInsertContent', 0, return_text);
      });

      ed.addCommand('attention', function() {
        var selected_text1 = ed.selection.getContent();
        var return_text1 = '';
        return_text1 = '<span class="two_column align_center"><i class="icon-attention"></i><p>' + selected_text1 + '</p></span>';
        ed.execCommand('mceInsertContent', 0, return_text1);
      });

      ed.addCommand('youtube', function() {
        var vid = prompt('Введите id ролика на youtube: ');
        if (vid.length > 7) {
          shortcode = '[youtube vid="' + vid + '"]';
          ed.execCommand('mceInsertContent', 0, shortcode);
        } else {
          alert("Длина id ролика должна быть больше 7 символов.");
        }
      });
    },
  });
    tinymce.PluginManager.add( 'custom_link_class', tinymce.plugins.Wptuts );
})();

Only the middle attention button somehow doesn’t work very well, we don’t insert my wrapper and that’s it ((

Answer 3

functions.php:

function add_shortcode_button() {
    echo '<a href="#" id="add_shortcode_button" class="button"> <span class="dashicons dashicons-editor-code" style="padding-top: 4px; padding-right: 4px;"></span> My Shortcode</a>';
}
function include_shortcode_button_files() {
    wp_enqueue_script('shortcode_js', get_template_directory_uri() . '/shortcodes.js', array('jquery'), '1.0', true);
    wp_enqueue_style('shortcode_css', get_template_directory_uri() . '/shortcodes.css', false, '1.0');
}
if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) {
    add_action('media_buttons', 'add_shortcode_button', 15);
    add_action('wp_enqueue_media', 'include_shortcode_button_files');
}

function shortcode_popup() {
?>
    <div id="shortcode_window"> Bla Bla Bla... </div> 
<?php
}
add_action( 'admin_footer', 'shortcode_popup' );

shortcodes.js:

jQuery(document).ready(function($) {
    $("#add_shortcode_button").click(function() {
        $("#shortcode_window").show();
    });
});

shortcodes.css:

#shortcode_window {
    display: none;
}