Hôm nay tôi sẽ chia sẽ với anh chị về chủ đề Như thế nào để viết một plugin cho editor wordpress – TinyMCE

Ứng dụng chủ đề này là tạo một button để insert short code vào editor, ở đây chúng ta viết trong theme. Chúng ta sẽ tạo một thư mục button-to-insert-short-code trong thư mục theme, tạo file có tên là button-to-insert-short-code.php và bỏ tất cả code php vào trong file này.
Sau đó chúng ta sẽ include vào file function

• Thêm icon button vào editor wordpress – TinyMCE

Code sau sẽ làm việc đó:(thêm vào button-to-insert-short-code.php)

function fcwordpress_add_button_to_editor($buttons) { $buttons[] = "shortcode_button"; return $buttons; }

• Đăng ký plugin với editor wordpress – TinyMCE

Plugin ở đây là tập hợp các mã js,css… để làm việc insert short code vào editor

function fcwordpress_register_tinymce_plugin($plugin_array) { $path = get_stylesheet_directory_uri().'/button-to-insert-short-code'; $plugin_array['shortcode_button'] = $path.'/short-code.js'; return $plugin_array; }

• Móc vào wordpress

Chúng ta sẽ sử dụng hook action init để làm việc này

add_action('init', 'fcwordpress_shortcode_button_init'); function fcwordpress_shortcode_button_init() { //Kiểm tra quền user có được dùng tinymce if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true') return; //Đăng ký plugin với tinymce add_filter("mce_external_plugins", "fcwordpress_register_tinymce_plugin"); //chúng ta có thể thêm vào dòng 1,2,3 ở đây là 3 add_filter('mce_buttons_3', 'fcwordpress_add_button_to_editor'); }

• Viết plugin cho editor wordpress – TinyMCE

Tạo file js có tên là short-code.js và bỏ code sau vào

jQuery(document).ready(function($) { tinymce.create('tinymce.plugins.tlshortcode', { init : function(ed, url) { // Đăng ký lệnh khi click button ed.addCommand('tlshortcode_command', function() { selected = tinyMCE.activeEditor.selection.getContent(); if( selected ){ content = '[shortcode]'+selected+'[/shortcode]'; }else{ content = '[shortcode]'; } tinymce.execCommand('mceInsertContent', false, content); }); // Thêm button vào editor ed.addButton('shortcode_button', {title : 'Insert shortcode', cmd : 'tlshortcode_command', image: url + '/img/icon-short-code.png' }); }, }); // Đăng ký với tinymce tinymce.PluginManager.add('shortcode_button', tinymce.plugins.tlshortcode); });

• Kết quả: