Như thế nào để viết một plugin cho editor wordpress – TinyMCE

25/12/2015 06:52 3076

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

<?php include "button-to-insert-short-code/button-to-insert-short-code.php" ; ?>

1	<?php include "button-to-insert-short-code/button-to-insert-short-code.php" ; ?>

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

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

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

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

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ả:

4.9/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Thêm font family vào editor wordpress [ 24/12/2015 10:44 ]

Như thế nào để viết một plugin cho editor wordpress – TinyMCE

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)