I had a drop-down list displaying all of my custom shortcodes in the tinymce editor. Below is my code in my functions file:
function register_customcode_dropdown( $buttons ) {
array_push( $buttons, "Shortcodes" );
return $buttons;
}
function add_customcode_dropdown( $plugin_array ) {
$plugin_array['Shortcodes'] = get_template_directory_uri() . '/js/mybuttons.js';
return $plugin_array;
}
function customcode_dropdown() {
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_customcode_dropdown' );
add_filter( 'mce_buttons', 'register_customcode_dropdown' );
}
}
add_action('init', 'customcode_dropdown');
After the upgrade to 3.9 the drop-down no longer appears. What changes do I need to make to my code to get this working again? (below is my javascript file code as well)
(function() {
tinymce.create('tinymce.plugins.Shortcodes', {
init : function(ed, url) {
},
createControl : function(n, cm) {
if(n=='Shortcodes'){
var mlb = cm.createListBox('Shortcodes', {
title : 'Kleen Shortcodes',
onselect : function(v) {
if(v == 'Tabs Wrapper'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[tabs_wrap]'+selected+'[/tabs_wrap]';
}else{
content = '[tabs_wrap][/tabs_wrap]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Tab Content'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[tab_content title=""]'+selected+'[/tab_content]';
}else{
content = '[tab_content title=""][/tab_content]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Accordion Wrapper'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[accordion_wrap]'+selected+'[/accordion_wrap]';
}else{
content = '[accordion_wrap][/accordion_wrap]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Accordion Content'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[accordion_content title=""]'+selected+'[/accordion_content]';
}else{
content = '[accordion_content title=""][/accordion_content]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Button Link'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[button_link]'+selected+'[/button_link]';
}else{
content = '[button_link][/button_link]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/2'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_half]'+selected+'[/one_half]';
}else{
content = '[one_half][/one_half]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/2 Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_half_last]'+selected+'[/one_half_last]';
}else{
content = '[one_half_last][/one_half_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/3'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_third]'+selected+'[/one_third]';
}else{
content = '[one_third][/one_third]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/3 Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_third_last]'+selected+'[/one_third_last]';
}else{
content = '[one_third_last][/one_third_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/4'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_fourth]'+selected+'[/one_fourth]';
}else{
content = '[one_fourth][/one_fourth]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/4 Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_fourth_last]'+selected+'[/one_fourth_last]';
}else{
content = '[one_fourth_last][/one_fourth_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/2 Center'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_half_center]'+selected+'[/one_half_center]';
}else{
content = '[one_half_center][/one_half_center]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/2 Center Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_half_center_last]'+selected+'[/one_half_center_last]';
}else{
content = '[one_half_center_last][/one_half_center_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/3 Center'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_third_center]'+selected+'[/one_third_center]';
}else{
content = '[one_third_center][/one_third_center]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/3 Center Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_third_center_last]'+selected+'[/one_third_center_last]';
}else{
content = '[one_third_center_last][/one_third_center_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/4 Center'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_fourth_center]'+selected+'[/one_fourth_center]';
}else{
content = '[one_fourth_center][/one_fourth_center]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 1/4 Center Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[one_fourth_center_last]'+selected+'[/one_fourth_center_last]';
}else{
content = '[one_fourth_center_last][/one_fourth_center_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 3/4'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[three_fourth]'+selected+'[/three_fourth]';
}else{
content = '[three_fourth][/three_fourth]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 3/4 Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[three_fourth_last]'+selected+'[/three_fourth_last]';
}else{
content = '[three_fourth_last][/three_fourth_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 2/3'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[two_third]'+selected+'[/two_third]';
}else{
content = '[two_third][/two_third]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Column 2/3 Last'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[two_third_last]'+selected+'[/two_third_last]';
}else{
content = '[two_third_last][/two_third_last]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Highlight Text'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[highlight]'+selected+'[/highlight]';
}else{
content = '[highlight][/highlight]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Blockquote'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[blockquote]'+selected+'[/blockquote]';
}else{
content = '[blockquote][/blockquote]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Recent Post'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[post_recent posts="2"]';
}else{
content = '[post_recent posts="2"]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Recent Sermons'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[recent_sermons posts="2"]';
}else{
content = '[recent_sermons posts="2"]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Staff List'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[staff_category posts="4" staff_category=""]';
}else{
content = '[staff_category posts="4" staff_category=""]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Check List'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[check_list]'+selected+'[/check_list]';
}else{
content = '[check_list][/check_list]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Times List'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[times_list]'+selected+'[/times_list]';
}else{
content = '[times_list][/times_list]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Arrow List'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[arrow_list]'+selected+'[/arrow_list]';
}else{
content = '[arrow_list][/arrow_list]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
if(v == 'Horizontal Rule Center'){
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[horizontal_rule_center]'+selected+'[/horizontal_rule_center]';
}else{
content = '[horizontal_rule_center][/horizontal_rule_center]';
}
tinymce.execCommand('mceInsertContent', false, content);
}
}
});
// Add some menu items
var my_shortcodes = ['Accordion Content','Accordion Wrapper','Arrow List','Blockquote','Button Link','Check List','Column 1/4 Last','Column 1/4','Column 1/2 Last','Column 1/2','Column 1/3 Last','Column 1/3','Column 3/4 Last','Column 3/4','Column 2/3 Last','Column 2/3','Column 1/2 Center','Column 1/2 Center Last','Column 1/3 Center','Column 1/3 Center Last','Column 1/4 Center','Column 1/4 Center Last','Highlight Text','Horizontal Rule Center','Recent Post','Recent Sermons','Staff List','Tab Content','Tabs Wrapper','Times List'];
for(var i in my_shortcodes)
mlb.add(my_shortcodes[i],my_shortcodes[i]);
return mlb;
}
return null;
}
});
tinymce.PluginManager.add('Shortcodes', tinymce.plugins.Shortcodes);
})();
With tinymce4 there are many things that need to be handled differently than with tinymce3. createControl doesn't exist anymore. You will have to modify your plugin code in order to work with tinymce4 (see the migration guide from tinymce3.x).
Here is an example for a custom dropdownbutton to select styles.
ed.addButton('xstyle', {
type: 'listbox',
text: 'my_text',
icon: false,
tooltip: 'my_tooltip_text',
fixedWidth: true,
onselect: function(e)
{
var options = {paragraphs: 1, calldirect: 1};
var format_to_apply = this.text();
...
ed.focus();
},
values: xstyle_options, // array
onPostRender: function()
{
ed.my_style_control = this;
}
});