Add shortcode via TinyMCE button WordPress
- SOLVED
Hi,
Does anybody know how to add a shortcode via a TinyMCE button. I want it to add the shortcode [super-form] straight away without any options.
Cheers,
Steve
Answers (6)
Sébastien | French WordpressDesigner answers:
add_shortcode('super-form', 'super-form');
function super-form(){
return 'here your form'; }
replace 'here your frm' by the code of your form (i suppose the shortcode will be replace by a form)
and to add the button
add_action('init', 'add_button');
function register_button($buttons) {
array_push($buttons, "quote");
return $buttons;
}
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, "super-form");
return $buttons;
}
function add_plugin($plugin_array) {
$plugin_array['super-form'] = get_bloginfo('template_url').'/js/customcodes.js';
return $plugin_array;
}
and create a file customcodes.js with this code
(function() {
tinymce.create('tinymce.plugins.super-form', {
init : function(ed, url) {
ed.addButton('super-form', {
title : 'Add a super-form',
image : url+'/image.png',
onclick : function() {
ed.selection.setContent('[super-form]');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('super-form', tinymce.plugins.super-form);
})();
this files goes into the theme folder, in a folder "js"
in this file image : url+'/image.png', is the url of the icon of your button
Steven Jones comments:
Please read the question - this will not do anything with TinyMCE
Sébastien | French WordpressDesigner comments:
please red my answer, i have edit it :-)
Sébastien | French WordpressDesigner comments:
this code add a buttton in your tinymce
when you click on it, it add this code : [super-form]
Sébastien | French WordpressDesigner comments:
Christianto says : <blockquote>Sébastien code above will work, please check his answer..</blockquote>
@Christianto : so, you are a rockstar AND a gentleman !
Julio Potier answers:
Hello
look at that question :
http://wpquestions.com/question/showLoggedIn/id/3769
See you
Steven Jones comments:
Hi Julio,
I want the specific code in which to do it, that's why I'm using this site rather than the WordPress forums.
Steve
Clifford P answers:
[[LINK href="http://wordpress.org/extend/plugins/post-snippets/"]]http://wordpress.org/extend/plugins/post-snippets/[[/LINK]]
Arnav Joy answers:
check this link
http://www.tutorialchip.com/wordpress/wordpress-shortcode-tinymce-button-tutorial-part-2/
Steven Jones comments:
Can you provide the working code for my question please?
Arnav Joy comments:
open functions.php
add
add_action('init', 'super_form_button');
function super_form_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}
}
function register_button( $buttons ) {
array_push( $buttons, "|", "super-form" );
return $buttons;
}
function add_plugin( $plugin_array ) {
$plugin_array['super-form'] = get_bloginfo( 'template_url' ) . '/script/super_form.js';
return $plugin_array;
}
create a js file super_form.js and place it in script folder under your theme
paste following code in the js file
(function() {
tinymce.create('tinymce.plugins.super_form', {
init : function(ed, url) {
ed.addButton('super_form', {
title : 'Super Form',
image : url+'/super_form.png',
onclick : function() {
ed.selection.setContent('[super_form]' + ed.selection.getContent() + '[/super_form]');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('super_form', tinymce.plugins.super_form);
})();
Arnav Joy comments:
place the image in the script folder and named as super_form.png
this is the updated script
open functions.php
add
add_action('init', 'super-form-button');
function super-form-button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}
}
function register_button( $buttons ) {
array_push( $buttons, "|", "super-form" );
return $buttons;
}
function add_plugin( $plugin_array ) {
$plugin_array['super-form'] = get_bloginfo( 'template_url' ) . '/script/super-form.js';
return $plugin_array;
}
create a js file super-form.js and place it in script folder under your theme
paste following code in the js file
(function() {
tinymce.create('tinymce.plugins.super-form', {
init : function(ed, url) {
ed.addButton('super-form', {
title : 'Super Form',
image : url+'/super-form.png',
onclick : function() {
ed.selection.setContent('[super-form]' + ed.selection.getContent() + '[/super-form]');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('super_form', tinymce.plugins.super-form);
})();
Navjot Singh answers:
You can use either [[LINK href="http://wordpress.org/extend/plugins/shortcodes-pro/"]]Shortcodes Pro[[/LINK]] or [[LINK href="http://wordpress.org/extend/plugins/tinymce-generic-wp-shortcode-editor/"]]TinyMCE Generic WP Shortcode Editor[[/LINK]] plugins for this.
Christianto answers:
Hi,
there is no simple way, you have to understand javascript
Please see [[LINK href="http://wpquestions.com/answer/version/id/3213"]]my answer here..[[/LINK]]
Edit, julio is right.. :)
that is the simplest ways..
Steven Jones comments:
Hi Christianto,
Can you refactor your code to make it work for my solution please?
Christianto comments:
Thats only button that print certain shortcode right?
Since you are looking for the simplest solution you can use plugin that mention above by Navjot Singh.
Or you don't want to use plugin?
Steven Jones comments:
This is part of a plugin - so I need your code please.
Christianto comments:
Sébastien code above will work, please check his answer..