Tiny MCE Button
Add tinyMCe buttons as dropdwon list
To use shortcode in your wordpress theme tiny MCE mostly used. So we must know how can use this in wordpress editor. I am going to describe here how to easily use the buttons on you editor. With a few steps I will try to describe everything about tiny mce buttons.
First step: Below code taking your function.php . Here use a external js file name ‘tinymce-button.js’ the file must to need correctly the file location.
<?php
// Hooks your functions into the correct filters
function my_add_mce_button() {
// check user permissions
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// check if WYSIWYG is enabled
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
add_filter( 'mce_buttons', 'my_register_mce_button' );
}
}
add_action('admin_head', 'my_add_mce_button');
// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
$plugin_array['my_mce_button'] = get_template_directory_uri() .'/inc/js/tinymce-button.js';
return $plugin_array;
}
// Register new button in the editor
function my_register_mce_button( $buttons ) {
array_push( $buttons, 'my_mce_button' );
return $buttons;
}
In this code use one function and two filter. Hopefully it may understand the function.
Second Step: You have to used the previous external js file. Create text file by name tinymce-button.js and below code taking on it.
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton('my_mce_button', {
text: 'My Button',
icon: false,
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
});
});
})();
If taking it file correct with function.php file (Ex: inc/js/tinymce-button.js) save it correctly. And reload you editor you must see a button name “My Button” on top-right corner of the editor. If you click on My Button the [shortcode name=” ” title=” “] are shown in your editor. This [shortcode name=” ” title=” “] shortcode come from tinymce-button.js file if edit the file by using your shortcode and save it. Now you get your given shortcode when click on the My Button. This is simple tiny MCE button.
To use tiny MCE buttons on editor use below code in tinymce-button.js instead of previous one.
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'my-mce-icon',
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
});
});
})();
Here change only:
text: 'My Button', icon: false,
by
icon: 'my-mce-icon',
this line
To use the buttons instead of text need one more function in function.php file for style
function my_shortcodes_mce_css() { ?>
<style type="text/css" >
.mce-ico.mce-i-my-mce-icon {
background:url(http://markwebservices.com/wp-content/uploads/2014/05/favicon-1.ico);
}
</style>
<?php
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );
Here background-image:url can change like your ones.
To many TinyMCE button add as dropdwon below code in tinymce-button.js instead of previous javascript code.
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
text: 'Dropdown',
icon: false,
type: 'menubutton',
menu: [
{
text: 'List one',
menu: [
{
text: 'Sub list 1',
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
},
{
text: 'Sub list 2',
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
}
]
},
{
text: 'List two',
menu: [
{
text: 'Sub list 1',
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
},
{
text: 'Sub list 2',
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
}
]
}
]
});
});
})();
Here you can your shortcode instead of [shortcode name=”” title=””].
Another dropdown tiny MCE buttons which open popup. To use this taking below code in your tinymce-button.js instead of previous javascript code.
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'my-mce-icon',
type: 'menubutton',
menu: [
{
text: 'Item one',
menu: [
{
text: 'Pop-Up',
onclick: function() {
editor.windowManager.open( {
title: 'Insert Fixed Shortcode',
body: [
{
type: 'textbox',
name: 'textboxName',
label: 'Text Box',
value: 'Defualt value'
},
{
type: 'textbox',
name: 'multilineName',
label: 'Multiline Text Box',
value: 'You can say a lot of stuff in here',
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: 'listbox',
name: 'listboxName',
label: 'List Box',
'values': [
{text: 'Option one', value: 'Set a value for option one'},
{text: 'Option two', value: 'Set a value for option two'},
{text: 'Option three', value: 'Set a value for option three'}
]
}
],
onsubmit: function( e ) {
editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
}
});
}
}
]
},
{
text: 'Item Two',
menu: [
{
text: 'Pop-Up',
onclick: function() {
editor.windowManager.open( {
title: 'Insert Your Shortcode',
body: [
{
type: 'textbox',
name: 'textboxName',
label: 'Text Box',
value: 'Defualt value'
},
{
type: 'textbox',
name: 'multilineName',
label: 'Multiline Text Box',
value: 'Defualt text here',
multiline: true,
minWidth: 300,
minHeight: 100
}
],
onsubmit: function( e ) {
editor.insertContent( '[shortcode name="' + e.data.textboxName + '" title="' + e.data.multilineName + '"]');
}
});
}
}
]
}
]
});
});
})();
To think deeply I hope that every one can use shortcode and get data from popup as [shortcode name=”‘ + e.data.textboxName + ‘”]
If you faced any problem to use the tiny MCE buttons comment here.
Comments are closed
