fbpx
close

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

Tác giả: Hồng Nhi Ngày cập nhật: 30/10/2020 Chuyên mục: Webmasters
Disclosure
Website Wiki.tino.org được cung cấp bởi Tino Group. Truy cập và sử dụng website đồng nghĩa với việc bạn đồng ý với các điều khoản và điều kiện trong chính sách bảo mật - điều khoản sử dụng nội dung. Wiki.tino.org có thể thay đổi điều khoản sử dụng bất cứ lúc nào. Việc bạn tiếp tục sử dụng Wiki.tino.org sau khi thay đổi có nghĩa là bạn chấp nhận những thay đổi đó.
Why Trust Us
Các bài viết với hàm lượng tri thức cao tại wiki.tino.org được tạo ra bởi các chuyên viên Marketing vững chuyên môn và được kiểm duyệt nghiêm túc theo chính sách biên tập bởi đội ngũ biên tập viên dày dặn kinh nghiệm. Mọi nỗ lực của chúng tôi đều hướng đến mong muốn mang đến cho cộng đồng nguồn thông tin chất lượng, chính xác, khách quan, đồng thời tuân thủ các tiêu chuẩn cao nhất trong báo cáo và xuất bản.

TinyMCE là gì?

TinyMCE là chữ viết tắt của cụm “Tiny Moxiecode Content Editor”. Đây là một nền tảng độc lập dựa trên Javascript HTML WYSIWYG được phát hành bởi LGPL web.  Hiểu đơn giản, TinyMCE là một trình soạn thảo văn bản mở rộng của WordPress. Người dùng thường thêm TinyMCE vào hệ thống quản trị website để nhập liệu nội dung, hình ảnh, … Nhờ TinyMCE, thao tác soạn thảo và chỉnh sửa định dạng những đoạn văn bản như blog, description… sẽ dễ dàng hơn.  Bạn có thể tìm và download TinyMCE trên kho plugin của WordPress. Plugin này thường xuyên được cập nhật và tương thích với phiên bản WordPress mới nhất. Đôi lúc giao diện trang soạn thảo văn bản WordPress của bạn bị lỗi, có thể xuất phát từ nguyên nhân là trang web của bạn chưa được update lên phiên bản mới.

Shortcode là gì?

Một trong những tính năng độc đáo của WordPress là shortcode (tạm dịch: Mã ngắn/chuỗi số ngắn). Sử dụng shortcode, bạn có thể tạo ra nhiều chức năng tùy biến. Từ đó, người dùng có thể sử dụng trong nội dung của bài viết hoặc widget thậm chí là sử dụng tại bất kỳ nơi nào trong giao diện WordPress. Tính năng thực thi một nhiệm vụ nào đó của shortcode đã được bạn định sẵn trong lúc tạo.  Trong bài viết này, TinoHost sẽ hướng dẫn bạn cách thêm nút shortcode vào thanh công cụ của trình soạn thảo TinyMCE.

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

Bước 1: Đầu tiên, bạn khai báo 1 shortcode có chức năng tạo nhanh 1 icon các biểu tượng cảm xúc trên TinyMCE.  Bước 2: Bạn chèn nội dung tại cuối file function.php của theme đang sử dụng.
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');
Bước 3: Bạn khai báo nội dung button js đã được gọi ở trên. Bạn có thể khai báo nội dung bằng cách tạo file plugin.js ngay chính thư mục root theme đang sử dụng. Nội dung như sau :
/* 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'
        });
    });
Bước 4: Bạn khai báo tương tự css cho biểu tượng icon này tại file plugin.css với nội dung: 
.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 :them-nut-shortcode-vao-tinymceCuố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. Lúc này, bạn có thể chọn nhanh shortcode biểu tượng icon khuôn mặt mà bạn vừa tạo ra. them-nut-shortcode-vao-tinymce  Chúc bạn thêm nút shortcode vào TinyMCE thành công nhé! Mọi thắc mắc và góp ý liên quan, xin vui lòng liên hệ ngay TinoHost để được tư vấn chi tiết hoặc Fanpage để cập nhật những thông tin mới nhất nhé! Với bề dày kinh nghiệm hơn 5 năm cung cấp hosting, dịch vụ cho thuê máy chủ, các dịch vụ liên quan đến tên miền và bảo mật website, hãy để TinoHost đồng hành cùng bạn trên con đường khẳng định thương hiệu trên bản đồ công nghệ toàn cầu!
  • Website:

Tốt nghiệp Trường Đại học KHXH&NV - ĐHQG TP.HCM năm 2019 với tấm bằng cử nhân ngành Ngữ văn Nga, Ngữ văn Anh, sở hữu kinh nghiệm nhiều năm hoạt động trong lĩnh vực truyền thông, Hồng Nhi đam mê sáng tạo những nội dung có giá trị kiến thức cho độc giả. "Luôn đặt mình vào vị trí độc giả, cố gắng diễn giải cái khó hiểu nhất bằng cách dễ hiểu nhất để bất cứ người dùng phổ thông nào cũng có thể hiểu và thao tác thành công" - đây là cách chị Hồng Nhi - một content writer xuất phát từ "xã hội" - "lấn sân", khám phá và làm chủ ngòi bút trên các trang blog công nghệ. Đồng hành cùng TinoHost từ những ngày đầu hoạt động, đến nay, chị đã trở thành Content Manager của TinoHost - trực tiếp quản lý và vận hành wiki.tino.org cùng rất nhiều website uy tín khác.

Xem thêm bài viết

Bài viết liên quan