Hướng dẫn thêm nút shortcode vào TinyMCE

TinyMCE là gì?

Shortcode là gì?

Thao tác thêm  nút shortcode vào TinyMCE

function mce_smiley_button($buttons) {
    array_push($buttons, 'smiley');
    return $buttons;
}
add_filter('mce_buttons', 'mce_smiley_button');
function mce_smiley_js($plugin_array) {
    $plugin_array['smiley'] = get_template_directory_uri() .'/plugin.js';
    return $plugin_array;
}
add_filter('mce_external_plugins', 'mce_smiley_js');
function mce_smiley_css() {
    wp_enqueue_style('tinymce-smiley-button', get_theme_file_uri('/plugin.css', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'mce_smiley_css' );
add_action( 'wp_enqueue_scripts', 'mce_smiley_css' );
function mce_smiley_settings($settings) {
    global $wpsmiliestrans;
    if (get_option('use_smilies')) {
        $keys = array_map('strlen', array_keys($wpsmiliestrans));
        array_multisort($keys, SORT_ASC, $wpsmiliestrans);
        $smilies = array_unique($wpsmiliestrans);
        $smileySettings = array(
            'smilies' => $smilies,
            'src_url' => apply_filters('smilies_src', includes_url('images/smilies/'), '', site_url())
        );
        echo '<script>window._smileySettings = ' . json_encode($smileySettings) . '</script>';
    }
    return $settings;
}
add_filter('tiny_mce_before_init', 'mce_smiley_settings');

/* global tinymce, twemoji, _wpemojiSettings, _smileySettings */
(function() {
    function getSmileySrc(smiley) {
        if (/\.([^.]+)$/.test(smiley)) {
            return _smileySettings.src_url + smiley;
        }
        return ''.concat(twemoji.base, twemoji.size, '/', twemoji.convert.toCodePoint(smiley), twemoji.ext);
    }
    function getHtml() {
        var supportEmoji = '_wpemojiSettings' in window && _wpemojiSettings.supports && _wpemojiSettings.supports.everything;
        var smilies = _smileySettings.smilies;
        var idx = 1;
        var cols = 5;
        var emoticonsHtml;
        var text;
        var icon;
        emoticonsHtml = '<table role="list" class="mce-grid">';
        for (text in smilies) {
            if (Object.prototype.hasOwnProperty.call(smilies, text)) {
                icon = smilies[text];
                if (idx % cols === 1) emoticonsHtml += '<tr>';
                emoticonsHtml += '<td><div data-mce-alt="' + text + '" tabindex="-1" role="option" aria-label="' + text + '">';
                if ((!window._wpemojiSettings || supportEmoji) && icon.indexOf('.') === -1) {
                    emoticonsHtml += icon;
                } else {
                    emoticonsHtml += '<img src="' + getSmileySrc(icon) + '" />';
                }
                emoticonsHtml += '</div></td>';
                if (idx % cols === 5) emoticonsHtml += '</tr>';
                idx++;
            }
        }
        emoticonsHtml += '</table>';
        return emoticonsHtml;
    }
    tinymce.PluginManager.add('smiley', function(editor) {
        editor.addButton('smiley', {
            type: 'panelbutton',
            panel: {
                classes: 'smily',
                role: 'application',
                autohide: true,
                html: getHtml,
                onclick: function(e) {
                    var linkElm = editor.dom.getParent(e.target, 'div');
                    if (linkElm) {
                        editor.insertContent('&nbsp;' + linkElm.getAttribute('data-mce-alt') + '&nbsp;');
                        this.hide();
                    }
                }
            },
            tooltip: 'Emoticons'
        });
    });

.mce-toolbar .mce-i-smiley {
     background: url(../../../wp-includes/images/smilies/simple-smile.png) no-repeat 50% 50%;
     background-size: contain;
}
.mce-smily .mce-grid div {
     font-size: 24px;
     line-height: 1;
    text-align: center;
    width: 1em;
    height: 1em;
    padding: 3px;
    border: 0;
    border-radius: 1px;
    cursor: pointer;
}
.mce-smily .mce-grid div:hover {
    background: #b4b9be;
}
.mce-smily .mce-grid img {
    font-size: inherit;
    width: 1em;
    height: 1em;
    vertical-align: top;
}

Bạn chèn và tạo nội dung tại 3 file trên theme đang sử dụng giống như sau :Cuối cùng, bạn truy cập lại trình chỉnh sửa editor classic của WordPress. Bạn sẽ thấy biểu tượng tạo shortcode icon bạn vừa tạo ra.

 

• Website: