Adding buttons to wysiwyg wordpress editor
TinyMCE WordPress adding buttons. As I said in the introductory text, default editor contains only required elements. You can add functionality by adding new buttons. I present below the code for adding a button to the editor:
|
1 2 3 4 5 |
function add_mce_buttons($buttons){ array_push($buttons, "hr"); return $buttons; } add_filter("mce_buttons", "add_mce_buttons"); |
Here HERE complete list of all buttons. Add code to your theme in function.php file. The button can also be added on the 2nd or 3rd line in the following way:
|
1 2 |
add_filter ( "mce_buttons_2" , "add_mce_buttons" ); add_filter ( "mce_buttons_3" , "add_mce_buttons" ); |
Creating custom buttons in the TinyMCE editor:
If you are using shortcode or classes for text, Images, buttons, which can also be created.
Here I am going to create a button on the third row, the button will only work if the user has permission to edit posts or pages.
Add below code in function.php:
|
1 2 3 4 5 6 7 8 |
add_action('init', 'custom_mce_button'); function custom_mce_button() { if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) { add_filter('mce_buttons_3', 'add_button'); add_filter('mce_external_plugins', 'add_plugin'); } } |
Let's create another button that takes the selected text into a shortcode:
Button add function:
function add_button($buttons){ array_push($buttons,"blcss");return $buttons;}
Add more code that will access the TinyMCE editor and WordPress:
|
1 2 3 4 |
function add_plugin($plugin_array) { $plugin_array['blist'] = get_bloginfo('template_url').'/scripts/customcodes.js'; return $plugin_array; } |
Complete the task, adding the following code to a file called customcodes.js . Save it in the path defined above.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(function(){ tinymce.PluginManager.requireLangPack('blist'); tinymce.create('tinymce.plugins.blist', { init : function(ed, url){ ed.addCommand('cmd_css', function(){ ilc_sel_content = tinyMCE.activeEditor.selection.getContent(); tinyMCE.activeEditor.selection.setContent('' + ilc_sel_content + ''); // замените на квадратные скобки }); ed.addButton('blcss', { title: 'CSS Wrap', image: 'https://plugins.jasonbahl.com/wp-content/plugins/j2_anything_slider/js/menu_icon.png', cmd: 'cmd_css' }); }, createControl : function(n, cm){ return null; }, }); tinymce.PluginManager.add('blist', tinymce.plugins.blist); })(); |
Hiding unwanted buttons using the TinyMCE editor options
If you want to remove unwanted buttons in the editor, then just provide the following code:
|
1 2 3 4 5 |
function disable_mce_buttons( $opt ) { $opt['theme_advanced_disable'] = 'bold,italic'; return $opt; } add_filter('tiny_mce_before_init', 'disable_mce_buttons'); |
You can also set a special parameter and show only those elements, which you want:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function custom_options( $opt ) { //format drop down list $opt['theme_advanced_blockformats'] = 'p,pre,code,h3,h4'; //font list $opt['theme_advanced_fonts'] = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace'; //font size $opt['theme_advanced_font_sizes'] = '10px,12px,14px,16px,24px'; //default foreground color $opt['theme_advanced_default_foreground_color'] = '#000000'; //default background color $opt['theme_advanced_default_background_color'] = '#FFFFFF'; return $opt; } add_filter('tiny_mce_before_init', 'custom_options); |
Also work with TinyMCE editor buttons possible in a file wp-includes/js/quicktags.js but I wouldn't recommend, when you update the engine, your settings will simply fly off.
The article was taken and translated from the site: sumtips.com
Thanks and corrections can be sent in the comments.
I'll try to answer everyone quickly.
I use this code myself, so adding buttons to the TinyMCE editor in WordPress should work perfectly.
I will try to post another article in the near future on how to add buttons in code editing mode in WordPress.
