Chèn button vào trình soạn thảo TinyMCE trong WordPress

Đây là 01 đoạn code giúp chúng ta chèn 01 nội dung vào trình soạn thảo của TinyMCE thông qua 1 button bạn đã khai báo trước (ở đây button của mình có tên là ThichCode.NET), các bạn có thể dùng vào nhiều mục đích sử dụng khác nhau như là chèn shortcode, hoặc chèn 01 nội dung theo chuẩn mà mình qui định (ví dụ: button chèn code HTML - CSS - JS - PHP - C# hoặc button chèn link download).

Trong bài viết là mình ví dụ chèn 01 cấu trúc shortcode [thichcode xep_loai="loai1" tieu_de="ThichCode.NET" danh_gia="Khá bổ ích :)"]Là 01 website chuyên viết về code qua trải nghiệm của tác giả.[/thichcode]. Sau đây là code:

Chèn đoạn code sau vào file function.php

add_action('admin_head', function(){
	// check user permissions
	if ( !current_user_can( 'edit_posts' ) &&  !current_user_can( 'edit_pages' ) ) {
			   return;
	}
	// Check if WYSIWYG is enabled	
    if ( get_user_option( 'rich_editing' ) == 'true' ) {		
        add_filter( 'mce_external_plugins', 'custom_tinymce_plugin' );
        add_filter( 'mce_buttons', 'register_mce_buttons' );
    }
});

function custom_tinymce_plugin($plugin_array) {	
	$plugin_array['custom_mce_button_thichcode'] = get_stylesheet_directory_uri() .'/inc/backend/js/button_thichcode.js';
	return $plugin_array;
}

// Register and add new button in the editor
function register_mce_buttons( $buttons ) {
	array_push($buttons, 'custom_mce_button_thichcode');
	return $buttons;
}

Nội dung file button_thichcode.js

(function() {
    tinymce.PluginManager.add('custom_mce_button_thichcode', function(editor, url) {
        editor.addButton('custom_mce_button_thichcode', {
            icon: false,
            text: 'ThichCode.NET',
            onclick: function(e) {
                editor.windowManager.open({
                    title: 'Chèn shortcode',
                    body: [{
                            type: 'listbox',
                            name: 'xep_loai',
                            label: 'Xếp loại',
                            values: [{
                                    text: 'Loại 1',
                                    value: 'loai1'
                                },
                                {
                                    text: 'Loại 2',
                                    value: 'loai2'
                                },
                                {
                                    text: 'Loại 3',
                                    value: 'loai3'
                                }
                            ],
                            minWidth: 350
                        },
                        {
                            type: 'textbox',
                            name: 'tieu_de',
                            label: 'Tiêu đề',
                            minWidth: 350
                        },
                        {
                            type: 'textbox',
                            multiline: true,
                            name: 'mo_ta',
                            label: 'Mô tả',
                            minWidth: 350,
                            minHeight: 150
                        },
                        {
                            type: 'textbox',
                            multiline: true,
                            name: 'danh_gia',
                            label: 'Đánh giá',
                            minWidth: 350,
                            minHeight: 100
                        }

                    ],
                    onsubmit: function(e) {
                        editor.focus();
                        // Insert selected callout back into editor, wrapping it in a shortcode
                        var danh_gia = (e.data.danh_gia) ? (' danh_gia="' + e.data.danh_gia + '"') : ('');
                        editor.execCommand('mceInsertContent', false, '[thichcode xep_loai="' + e.data.xep_loai + '" tieu_de="' + e.data.tieu_de + '"' + danh_gia + ']' + e.data.mo_ta + '[/thichcode]');
                    }
                });
            }
        });
    });
})();