Невозможно разместить значение шорткода с помощью кнопки редактора - ошибка Uncaught Type Error

Question

Я создал кнопку редактора с помощью плагина TinyMCE. Кнопка отлично отображается на панели инструментов редактора. Но когда я нажимаю на него, чтобы поместить значение, я получаю следующую ошибку консоли. Как я могу это исправить, пожалуйста?

Версия WordPress: 4.7.5

Uncaught TypeError: Cannot read property 'paste' of undefined
    at d (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:9994)
    at Object.f [as insertAtCaret] (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:10103)
    at mceInsertContent (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:14254)
    at Object.m [as execCommand] (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:10568)
    at L.execCommand (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:13:4493)
    at L.<anonymous> (http://vagrant.local/content/themes/vip/yrc-wordpress-theme/plugins/mce-live-chat-button/mce-live-chat-button-plugin.js?wp-mce-4506-20170408:20:20)
    at D.exec.(anonymous function) (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:11468)
    at Object.m [as execCommand] (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:9:10568)
    at L.execCommand (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:13:4493)
    at t.cmd.t.onclick (http://vagrant.local/wp/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408:13:3626)

Это мой шорткод:

<?php

add_shortcode('live-chat-button', 'live_chat_editor_button_html');

function live_chat_editor_button_html() {
     $button_html = 'I have been placed...';
    return $button_html;
}

Это файл JS:

(function() {
    tinymce.create('tinymce.plugins.LiveChatEditorButton', {
        init : function(ed, url) {
            ed.addButton('livechat', {
                text: 'Live Chat',
                //icon: 'dashicons dashicons-admin-links',
                tooltip: 'Live Chat',
                cmd: 'livechat',
            });

            ed.addCommand('livechat', function(){
                ed.execCommand('mceInsertContent', '[live-chat-button]');
            });
        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : 'Live chat editor button',
                version : "0.1"
            };
        }
    });

    // Register plugin
    tinymce.PluginManager.add( 'yrceditorbutton', tinymce.plugins.LiveChatEditorButton );
})();

И вот код, который я использую в моем файле functions.php:

add_action( 'init', 'yrc_live_chat_editor_button' );
function yrc_live_chat_editor_button() {
    add_filter( "mce_external_plugins", "yrc_add_button" );
    add_filter( 'mce_buttons', 'yrc_register_button' );
}
function yrc_add_button( $plugin_array ) {
    $plugin_array['yrceditorbutton'] = get_template_directory_uri() . '/plugins/mce-live-chat-button/mce-live-chat-button-plugin.js';
    return $plugin_array;
}
function yrc_register_button( $buttons ) {
    array_push( $buttons, 'livechat' );
    return $buttons;
}

Кто-нибудь, пожалуйста, помогите мне исправить вышеупомянутую ошибку JS, которую я получаю.

Извините, что добавил еще один запрос. Я хочу отобразить дашикон с моей кнопкой, но он выглядит как пустой прямоугольник. Что еще нужно сделать, чтобы появился дашикон?

Я создаю кнопку "Редактор" в первый раз. Поэтому, пожалуйста, примите во внимание знания моего новичка.

Answer 1

Использование

ed.insertContent('[live-chat-button]');

вместо

ed.execCommand('mceInsertContent', '[live-chat-button]');

Пожалуйста, смотрите этот https://wordpress.stackexchange.com/a/241565/57944