Thought-about one in every of my favorite updates in WordPress 3.9 was making the TinyMCE mannequin 4.zero core. The model new TinyMCE seems to be like a look cleaner (truly matches the WP dashboard) and it has some very good added efficiency. A lot of my outdated themes and plugins wanted to be updated to work with the model new TinyMCE so I spent some time digging by the API and figuring some cool stuff out. Beneath I’ll give you some examples on how one can lengthen the efficiency of the TinyMCE. I’m not going to walk you via the entire steps or what the code means exactly (that’s meant for builders) nonetheless will give you the exact code you’ll copy/paste in your theme or plugin after which tweak accordingly.
Together with Font Dimension & Font Family Selects
By default the Custom-made Fonts and font sizes is not going to be added into the TinyMCE editor. The function beneath will add every of these dropdowns to the far left of the editor inside the second row. Merely change the place it says ‘mce_buttons_2’ to ensure that you it in a particular row (ex: use ‘mce_buttons_3’ for the third row).
if ( ! function_exists( 'wpex_mce_buttons' ) ) { function wpex_mce_buttons( $buttons ) { array_unshift( $buttons, 'fontselect' ); array_unshift( $buttons, 'fontsizeselect' ); return $buttons; }
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );Together with Custom-made Font Sizes
By default the font sizes are set to pt values which isn’t always supreme. I favor to utilize pixel values (12px, 13px, 14px, 16px..and so forth) and to supply further decisions for grater flexibility. The function beneath will alter the default font measurement decisions inside the dropdown selector.
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) { function wpex_mce_text_sizes( $initArray ){ $initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px"; return $initArray; }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );Together with Custom-made Fonts
The default font decisions inside the font family selector are all “web-safe” fonts by default, nonetheless what within the occasion you wanted in order so as to add further fonts to the selector? Maybe some Google Fonts? We’ll it’s very simple have a look on the occasion beneath.
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) { function wpex_mce_google_fonts_array( $initArray ) { $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,events;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;E-book Antiqua=e e book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impression=affect,chicago;Picture=picture;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Events New Roman=events new roman,events;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; return $initArray; }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );Uncover how I added “Lato” to the document inside the code above? It’s that simple! In my Full WordPress theme I actually loop by any custom-made font’s used on the situation as outlined inside the theme panel and add them to the select discipline so that they’re moreover obtainable whereas enhancing your posts/pages (sweet). Nonetheless the code ONLY adverts the font-family to the drop-down it acquired’t magically load the script so that when you change your textual content material inside the editor you’ll actually see that custom-made font utilized to it…That’s what the code beneath does!
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) { function wpex_mce_google_fonts_styles() { $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font_url ) ); }
}
add_action( 'init', 'wpex_mce_google_fonts_styles' );Enable the Codecs (sorts) Dropdown Menu & Add New Sorts
Consider the “Sorts” dropdown in WP 3.8? That was pretty cool! You would possibly use it in order so as to add some cool programs to be used contained in the submit editor (I apply it to WPSaviour actually for buttons, colored spans, bins..and so forth). We’ll in WP 3.9 you’ll nonetheless add sorts, nonetheless, it has been renamed inside the new TinyMCE 4.zero to “Codecs” so it actually works a tiny bit completely totally different. Beneath is an occasion of learn the way to permit the Codecs dropdown and likewise add some new objects to it.
Enable the Codecs Dropdown Menu
That’s actually accomplished within the an identical methodology earlier to WP 3.9 nonetheless I’m sharing incase you didn’t know learn the way to do it.
if ( ! function_exists( 'wpex_style_select' ) ) { function wpex_style_select( $buttons ) { array_push( $buttons, 'styleselect' ); return $buttons; }
}
add_filter( 'mce_buttons', 'wpex_style_select' );Add New Objects to Codecs
Together with new objects is large easy. Please uncover how I’ve added “$settings[‘style_formats_merge’] = true;” to the code beneath, this makes sure your edits are added to the codecs dropdown menu along with any others – don’t go overwriting the entire issue (presumably totally different plugins must make use of it as correctly).
if ( ! function_exists( 'wpex_styles_dropdown' ) ) { function wpex_styles_dropdown( $settings ) { $new_styles = array( array( 'title' => __( 'Custom-made Sorts', 'wpex' ), 'objects' => array( array( 'title' => __('Theme Button','wpex'), 'selector' => 'a', 'programs' => 'theme-button' ), array( 'title' => __('Highlight','wpex'), 'inline' => 'span', 'programs' => 'text-highlight', ), ), ), ); $settings['style_formats_merge'] = true; $settings['style_formats'] = json_encode( $new_styles ); return $settings; }
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );Together with A Straightforward MCE Button
Together with a model new button to the TinyMCE editor is especially useful for shortcodes, on account of as a client you don’t have to remember any shortcodes you’ll merely click on on a button and it inserts it. I’m not saying in order so as to add 100’s of buttons to the TinyMCE for your entire shortcodes (I hate when builders try this, it’s such harmful apply and seems horrible) nonetheless within the occasion you add 1 or only a few I’ll let it transfer ? In case you want to add a bunch, then it is best to create a submenu as outlined inside the half that follows.
PHP Code – Declare the model new MCE plugin in WP
This code will declare your new MCE plugin it’s best to positively change the state of affairs of the javascript file “mce-button.js” to match the state of affairs of your file (which I presents you the code for as correctly inside the subsequent subsection) along with clearly rename the prefix “my” to at least one factor further distinctive!
function my_add_mce_button() { if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } 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');
function my_add_tinymce_plugin( $plugin_array ) { $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js'; return $plugin_array;
}
function my_register_mce_button( $buttons ) { array_push( $buttons, 'my_mce_button' ); return $buttons;
}
JS Code – Add the button to the MCE
This js code goes inside the js file registered inside the snippet above inside the “symple_shortcodes_add_tinymce_plugin” function. This might add a model new textual content material button that claims “New Button” into your editor and when clicked it will insert the textual content material “WPSaviour.com is superior!” (in any case).
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { textual content material: 'New Button', icon: false, onclick: function() { editor.insertContent('WPSaviour.com is superior!'); } }); });
})();Add A Custom-made Icon To Your New MCE Button
Above I confirmed you learn the way so as to add a model new button that will present as “New Button” inside the editor, this generally is a bit lame…So the altered code will current you learn the way so as to add your private custom-made icon.
Load a stylesheet alongside together with your CSS
Use this function to load a model new stylesheet for use in your admin panel – some plugins/themes could already be together with a stylesheet so in case your theme/plugin is doing that skip this and easily add your custom-made CSS and tweak the js (confirmed beneath).
function my_shortcodes_mce_css() { wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );Your Custom-made CSS
That’s the CSS in order so as to add the the stylesheet loaded beforehand.
i.my-mce-icon { background-image: url('YOUR ICON URL');
}Tweak your Javascript
Now simple tweak the javascript which you added beforehand to remove the textual content material parameter and instead of setting the icon to false give it a custom-made classname.
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { icon: 'my-mce-icon', onclick: function() { editor.insertContent('WPSaviour.com is superior!'); } }); });
})();Together with A Button With Submenu
Earlier I mentioned that together with a ton of newest icons to the TinyMCE bar is a foul idea (and it is) so strive the code beneath to see how one can edit the javascript to indicate a submenu in your custom-made button. In case you want to see it in movement strive my Symple Shortcodes Video.
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { textual content material: 'Sample Dropdown', icon: false, variety: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('WPSaviour.com is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WPSaviour.com is awesome!'); } } ] }, { textual content material: 'Merchandise 2', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('WPSaviour.com is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WPSaviour.com is awesome!'); } } ] } ] }); });
})();Together with A Pop-Up Window To Your Button on Click on on
Inside the occasion above chances are you’ll uncover that every button merely inserts the textual content material “WPSaviour.com is superior!” which is cool, nonetheless what about making a pop-up window the place a client can alter what’s being inserted into the textual content material? Now which may be sweet! And it’s one factor I’ve added to mannequin 1.6 of my Symple Shortcodes, making the plugin far more user-friendly.
(function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { textual content material: 'Sample Dropdown', icon: false, variety: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Pop-Up', onclick: function() { editor.windowManager.open( { title: 'Insert Random Shortcode', body: [ { type: 'textbox', name: 'textboxName', label: 'Text Box', value: '30' }, { 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 1', value: '1'}, {text: 'Option 2', value: '2'}, {text: 'Option 3', value: '3'} ] } ], onsubmit: function( e ) { editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]'); } }); } } ] } ] }); });
})();
