无法使用编辑器按钮放置简码值 - 出现未捕获类型错误

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;
}

我还有一个请求。我想用我的按钮显示一个 dashicon，但它显示为一个空矩形。我还需要做什么才能显示 dashicon？

我是第一次构建编辑器按钮。所以请考虑我的初学者知识。

Answer 1

使用

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

而不是

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

请看这个https://wordpress.stackexchange.com/a/241565/57944

无法使用编辑器按钮放置简码值 - 出现未捕获类型错误

Cannot place shortcode value using Editor Button - getting Uncaught Type Error

wordpress

tinymce-plugins