Thêm shortcode vào trình soạn thảo Advanced Editor Tools(Tiny MCE)

Trình soạn thảo Advanced Editor Tools(Tiny MCE) đang được rất nhiều bạn tin dùng cho trang web của mình.Đôi khi trong bài viết không có sẵn shortcode bạn cần dùng. Bìa viết này sẽ hướng dấn các bạn thêm shortcode cho trình soạn thảo này qua các bước.Trước tiên cần có nơi lưu trữ ảnh và code js. bạn tìm đến folder chứa child-theme(theme) hiện tại -> tạo thêm folder images(lưu trữ ảnh) tải lên file ảnh đại diện shortcode, js(lưu code js) tải lên file custom.js

Bước 1: Chuẩn bị shortcode

add_shortcode("custom_button", "create_custom_button");
function create_custom_button( $atts, $content = null ) {
   $str = '<button id="custom_button">'. $content .'</button>';
return $str;
}

Bước 2: Khai báo shortcode thêm vào

add_action('init', 'add_button');
function add_button() {
   if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) {
      add_filter('mce_external_plugins', 'add_plugin');
      add_filter('mce_buttons', 'register_button');
   }
}
function register_button($buttons) {
   array_push($buttons, "custom_button");
   return $buttons;
}
function add_plugin($plugin_array) {
  $path = get_bloginfo('template_url') . '/js/custom.js';
  $plugin_array['custom_button'] = $path;
  return $plugin_array;
}

Bước 3: Gắn shortcode và chọn icon đại diện cho shortcode

(function() {
//Insert Button Shortcode
tinymce.create('tinymce.plugins._custom_button', {
init : function(ed, url) {
ed.addButton('create_custom_button', {
title : 'Create New Custom Button',
image : url + '/../images/insert_shortcode_tinymce.png',
onclick : function() {
ed.selection.setContent('[custom_button]' + ed.selection.getContent() + '[/custom_button]');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('custom_button', tinymce.plugins.custom_button);
})();

Chúc các bạn thành công