How can I add a custom button to the TinyMCE editor in WordPress?

Question

I've tried the solution from this(Add Custom Button to TinyMCE in WordPress) link, but it didn't work for me i had Added script to admin footer.

<?php
function my_admin_footer_function()
{
?>
  <script>
    (function() {
      tinymce.init({
        selector: "#mytextarea",
        toolbar: "myCustomButton",
        setup: function(editor) {
          editor.ui.registry.addButton("myCustomButton", {
            text: "Starter Template",
            icon: "plus",
            onAction: function() {
              const divContent =
                `<div class="custom-div">
                  <h1>Add your heading</h1>
                  <p>Add your paragraph</p>
                  <p>Add your paragraph</p>
                  <p>Add your paragraph</p>
                  <ul>
                    <li>Add Item 1</li>
                    <li>Add Item 2</li>
                    <li>Add Item 3</li>
                  </ul>
                </div>`;
              editor.insertContent(divContent);
            },
          });
        },
      });
    });
  </script>
<?php
}
add_action('admin_footer', 'my_admin_footer_function');

add_action('admin_init', 'custom_tinymce_button');

function custom_tinymce_button()
{
   add_filter('mce_buttons', 'register_custom_button');
}

Answer 1

You done well but you need to add filter for mce_external_plugins as well.

function.php

Note - We have not used admin_footer here. We registered new script for "CMS

add_action('admin_init', 'custom_tinymce_button');
function custom_tinymce_button()
{
   add_filter('mce_external_plugins', 'add_custom_tinymce_plugin');
   add_filter('mce_buttons', 'register_custom_button');
}

function add_custom_tinymce_plugin($plugin_array)
{
   $plugins['custom_button'] = get_template_directory_uri() . '/js/custom-button.js';
   return $plugin_array;
}
function register_custom_button($buttons)
{
   array_push($buttons, 'custom_button');
   return $buttons;
}

custom-button.js

You can update how you want it appear. You could add custom classes and apply css on it. icon.png - You need to add icon file in your theme this will show to custom button.

(function () {
  tinymce.create("tinymce.plugins.custom_button_plugin", {
    init: function (ed, url) {
      ed.addButton("custom_button", {
        title: "Starter Template",
        image: url + "/images/icon.png", //Optional
        onclick: function () {
          ed.insertContent(`
            <div contenteditable='false' class="custom-div">
               <h1 contenteditable='true'>Add your heading</h1>
               <p contenteditable='true'>Add your paragraph</p>
               <p contenteditable='true'>Add your paragraph</p>
               <p contenteditable='true'>Add your paragraph</p>
               <ul>
                  <li contenteditable='true'>Add Item 1</li>
                  <li contenteditable='true'>Add Item 2</li>
                  <li contenteditable='true'>Add Item 3</li>
               </ul>
            </div>
           `);
        },
      });
    },
    createControl: function (n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add(
    "custom_button",
    tinymce.plugins.custom_button_plugin
  );
})();

Output