CODEWITHSUNDEEP
wordpresstinymce-plugins
Subrata Sarkar
Subrata Sarkar

Reputation: 3064

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

I have created an Editor button using TinyMCE plugin. The button is displaying fine in Editor toolbar. But when I click on it to place the value I am getting the following console error. How can I fix this please?

WordPress version: 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)

This is my shortcode:

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

This is the JS file:

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

And here is the code I am using in my functions.php file:

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

I have one more request. I want to display a dashicon with my button but it comes up as an empty rectangle. What additional thing I need to do so that the dashicon appears?

I am building Editor Button for the first time. So please consider my beginner's knowledge.

Upvotes: 2

Views: 371

Answers (1)

mukto90
mukto90

Reputation: 397

Use

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

instead of 

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

Please see this https://wordpress.stackexchange.com/a/241565/57944

Upvotes: 2

Related Questions