Bill: TinyMCE 4 Enhanced add styles, buttons, fonts, drop-down menus, and pop-up windows

My favorite update for WordPress 3.9 is the use of the TinyMCE 4.0 editor. The new TinyMCE looks more neat (really matches WP dashboard), and it has some very nice additional features. Many of my old themes and plugins have to be updated to work with the new TinyMCE, so I spent some time researching the API and figuring out some cool stuff. Let me show you an example of how you can extend TinyMCE functionality. I will not guide you through all the steps, or what the code means (this is for developers), but will provide you with the code available for your theme or plugin, you can copy the exact same code, paste, and then adjust accordingly.

Increase font size and font selection

By default, the custom font and font size are not added to the TinyMCE editor. The following function adds these two drop-down menus to the far left of the second row of buttons in the editor. If you want to add to a different line, you only need to modify "mce_buttons_2" (for example: Use "Mce_buttons_3" as the 3rd line).

Wpex_mce_buttons' wpex_mce_buttons ');

To add a custom font size

The default font size is set to the PT value, which is not always ideal. I prefer to use pixel values (12 pixels, 13px,14px,16px, etc.) and provide a more flexible choice. The following function will change the default font size option in the drop-down selector.

wpex_mce_text_sizes$initArray [' wpex_mce_text_sizes '); 

Add a custom font

By default, in the Font selection list, the default font options are "Web safe" fonts, but if you want to add more fonts, perhaps some Google fonts? Very simple, take a look at the following example.

Add a custom font to the font listif (! function_exists (' Wpex_mce_google_fonts_array ')) {function wpex_mce_google_fonts_array ( $initArray) { $initArray [ ' font_formats '] =  ' Lato=lato; Andale Mono=andale Mono,times; Arial=arial,helvetica,sans-serif; Arial black=arial black,avant Garde; Book Antiqua=book Antiqua,palatino; Comic Sans ms=comic Sans Ms,sans-serif; Courier New=courier New,courier; Georgia=georgia,palatino; Helvetica=helvetica;impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new Roman,times; 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 ');  

Notice how I added the "Lato" font to the above code? It's so easy! In all my WordPress themes, I've defined the theme panel by iterating through all the custom fonts used on the site and adding them to the selection box, so that you can also use them (sweet) when editing articles/pages. But it just adds fonts to the list, but doesn't magically load the script, so when you change the font in the editor, you can't really see the custom fonts that apply to it ... This is what the following code is going to do!

Wpex_mce_google_fonts_styles' wpex_mce_google_fonts_styles ');

Enable formatting (style) drop-down menus and add new styles

Remember the "style" drop-down list in WP3.8? It's cool! You can use it to add some cool classes to be used in the story editor (I use it to implement buttons in Wpexplorer, color spans, boxes, etc.). In WP3.9, you can still add your own format, but it has been renamed to the new TinyMCE4.0 "format", so it works a little differently. The following example is how to add some new items to the Format drop-down list.

Enable the Format drop-down menu

This was done in previous versions of WP3.9. But I'd like to share it in case you don't know what to do.

Wpex_style_select' wpex_style_select ');

Add New item to Format menu

Adding new items is super easy. Please note that my code below is how to add "$settings [' style_formats_merge '] = true;", so you can make sure you add the Format drop-down menu to the editor without affecting the other person-don't go covering the whole thing (maybe other plugins want to use it).

Add a new style to the Format drop-down menuif (! function_exists (' Wpex_styles_dropdown ')) {functionWpex_styles_dropdown($settings) {Create an array of new styles$new _styles =ArrayArray' title ' = + __ (' Custom Styles ',' Wpex '),' Items ' =ArrayArray' title ' = + __ (' Theme Button ',' Wpex '),' Selector ' =' A ', ' classes ' +  ' Theme-button '), array ( ' title ' + __ ( ' Highlight ',  ' Wpex '),  Text-highlight ',),),); //merge new and old style  $settings [ ' style_formats_merge '] = span class= "keyword" >true; //add new style  $settings [ ' style_formats '] = Json_ Encode ( $new _styles);  Returns the new settings return  $settings;}} Add_filter ( ' Tiny_mce_before_init ',  ' Wpex_styles_dropdown ');    

Add a simple MCE button

Adding a New button to the TinyMCE editor is especially useful for simple code, because as a user you don't have to remember any simple code, you can simply click on a button and insert it. I'm not saying to add a button for all your Jane codes to TINYMCE (I hate developers doing this, it's such bad practice, it looks scary), but if you add 1 or a few, I'll agree with it) if you want to add a bunch, then you should create a submenu that will be introduced in the sections that follow.

PHP code-Declaring a new MCE plugin

This code will declare the new MCE plugin, be sure to change the location of the JavaScript file "Mce-button.js" to match the location of your files (I will give you the code as well as the next section), and modify the "my" prefix to other more unique characters.

Mount function to the correct hookfunctionMy_add_mce_button() {Check user permissionsif (!current_user_can (' edit_posts ') &&!current_user_can (' Edit_pages ')) {return;}Check whether visual editing is enabledif (' 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 '); //declaring a New button script function my_ Add_tinymce_plugin ( $plugin _array) { $plugin _ Array[ ' My_mce_button '] = Get_template_directory_uri (). return  $plugin _array;} //Register a new button on the editor function my_ Register_mce_button ( $buttons) {Array_push ($ Buttons,  ' My_mce_button '); return  $buttons;}         

JS code-Add MCE button

This JS code is placed in the "Symple_shortcodes_add_tinymce_plugin" function above the JS file registered. It can add a new text button in the editor that says "New button" and when clicked, it inserts the text "WP is awesome! ”。

(function () {TinyMCE. Pluginmanager.add (function (Editor, URL) {Editor.addbutton (function () {editor.insertcontent (' WP is (awesome! ');});}) ();

Add a custom icon to the new MCE button

I've described how to add a New button "New button" in the editor, which is a little less than perfect ... The following will show you how to add your own custom icons.

Load your CSS style sheet

Use this function to load a new style sheet into your admin panel using-some plugins/themes may have been added to the stylesheet, so if your theme/plugin does this, skip this and simply add custom CSS and tweak the JS (as shown).

My_shortcodes_mce_css() {Wp_enqueue_style (' SYMPLE_SHORTCODES-TC ', Plugins_url (' my_shortcodes_mce_css ');  

Your custom CSS

I{background-image:url (' Your icon address ');}    

Adjust your JS

Now, simply adjust your previously added JS, delete the text parameters, and instead, add a CSS class name.

(function () {TinyMCE. Pluginmanager.add (function () {editor.insertcontent (' WP is awesome! ');});}) ();

Add a button submenu

As I mentioned earlier, adding a lot of new icons to TinyMCE is a bad idea, so take a look at the following code to see how you can edit JavaScript to display a submenu of custom buttons.

(function () {TinyMCE. Pluginmanager.add (' My_mce_button ',function (Editor, URL) {Editor.addbutton ( ' My_mce_button ', {text:  ' Sample Dropdown ', Icon:  False,type:  ' Menubutton ', menu: [{text: " Sub Item 1 ', onclick: function () {editor.insertcontent ( WP is Awesome! ');}},{text: function () { Editor.insertcontent ( ' WP is awesome! ')}}]},{text:  ' Item 2 ', menu: [{text: function () {editor.insertcontent (  ' WP is awesome! ');}},{text:  function () {editor.insertcontent ( 

Add a pop-up window

In the example above, you may notice that each button simply inserts the text "WP is awesome!" It's cool, but if you create a pop-up window, the user can change the inserted text, isn't it cooler? Get It right now!

(function () {TinyMCE. Pluginmanager.add (' My_mce_button ', function (editor, URL) {Editor.addbutton (' My_mce_button ', {text: ' Sample Dropdown ') , Icon:false,type: ' 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: ' Can say a lotof stuffHere', Multiline:true,minwidth:300,minheight:100},{type: ' ListBox', Name: ' Listboxnamevaluesoption 1 ', value: '  1 '},{text: ' option 22 '},{text: ' option 33 '}]}],onsubmit:function (e) { Editor.insertcontent (' [Random_shortcode textbox= "' + E.data.multilinename + '" Listbox= 

Bill: TinyMCE 4 Enhanced add styles, buttons, fonts, drop-down menus, and pop-up windows