WordPress 3.9+ TinyMCE 4 enhancements: add styles, buttons, fonts, drop-down menus and pop-up windows

Article directory [hide]

  • Increase font size and font selection
  • Add custom font size
  • Add custom font
  • Enable the format (style) drop-down menu and add a new style
    • Enable format drop-down menu
    • Add new items to the format menu
  • Add a simple MCE button
    • PHP code-declare new MCE plugin
    • JS code-add MCE button
  • Add custom icons to the new MCE button
    • Load your CSS style sheet
    • Your custom css
    • Adjust your js
  • Add a button submenu
  • Add a popup
  • Cool… what’s next?

WordPress version 3.9+ and above integrates the 4 visual editor. Let me share today how to enhance and customize TinyMCE 4, such as adding styles, buttons, fonts, drop-down menus and pop-up windows. The tutorial comes from @AJ Clarke of wpexplorer, who advocates simple translation.

  • Original: AJ [email protected] http://www.wpexplorer.com/wordpress--tweaks/
  • Translation: Advocate @WordPress大学https://www.wpdaxue.com/wordpress--4-tweaks.html

My favorite update to WordPress 3.9 is to use the TinyMCE 4.0 editor. The new TinyMCE looks neater (really matches the WP dashboard), and it has some very nice additional features. Many of my old themes and plugins must be updated to work with the new TinyMCE, so I spent some time researching the API and finding some cool things. Below I will show you an example of how to extend the functions of TinyMCE. 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 or plugin. You can copy the exact same code, paste it, and then respond accordingly To adjust.

Increase font size and font selection

By default, custom fonts and font sizes are not added to the TinyMCE editor. The following function can add 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 row, you only need to modify “mce_buttons_2” (for example: use “mce_buttons_3” for the third row).

1
2
3
4
5
6
7
8
9
// enable font and font size selection in the editor 
IF  (  !  Function_exists (  'wpex_mce_buttons'  )  )  { 
	function wpex_mce_buttons (  $ Buttons  )  { 
		array_unshift (  $ Buttons ,  'FontSelect'  ) ;  // add font selection 
		array_unshift (  $ Buttons ,  'fontsizeselect'  ) ;  // Add font size selection 
		return  $buttons ; 
	} 
} 
add_filter (  'mce_buttons_2' ,  'wpex_mce_buttons'  ) ;

Add custom font size

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

1
2
3
4
5
6
7
8
// custom editor font size 
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'  ) ;

Add custom font

By default, in the font selection list, the default font options are all “web-safe” fonts, but if you want to add more fonts, maybe some Google fonts? Very simple, take a look at the following example.

1
2
3
4
5
6
7
8
// add custom fonts to font list 
IF  (  !  Function_exists (  'wpex_mce_google_fonts_array'  )  )  { 
	function wpex_mce_google_fonts_array (  $ initArray  )  { 
	    $ initArray [ 'font_formats' ]  =  ' = Lato Lato; = Andale Andale Mono 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'  ) ;

Please note how I added the “Lato” font to the code above? It’s that simple! In all my WordPress themes, I define on the panel by traversing all the custom fonts used on the website and adding them to the selection box, so that they can also be used when editing articles/pages (sweet). But it only adds fonts to the list, but it does not 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 wants made!

1
2
3
4
5
6
7
8
// add google font script 
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 format (style) drop-down menu and add a new style

Remember the “style” drop-down list in WP3.8? This is cool! You can use it to add some cool classes for use in the article editor (I use it to implement buttons, color spans, boxes, etc.) in WPExplorer. 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 in the format drop-down list.

2014-11-22_094240_wpdaxue_com

Enable format drop-down menu

This was also done in previous versions of WP3.9. But I still want to share it in case you don’t know what to do.

1
2
3
4
5
6
7
8
// add to the drop-down menu format editor 
IF  (  !  Function_exists (  'wpex_style_select'  )  )  { 
	function wpex_style_select (  $ Buttons  )  { 
		the array_push (  $ Buttons ,  'styleSelect'  ) ; 
		return  $ Buttons ; 
	} 
} 
the add_filter (  'mce_buttons' ,  'wpex_style_select'  ) ;

Add new items to the format menu

Adding new items is super easy. Please pay attention to how I add “$settings[‘style_formats_merge’] = true;” in the code below, so that you can ensure that you add the format drop-down menu to the editor without affecting others-don’t cover the whole thing (maybe other The plugin wants to use it).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
twenty one
twenty two
twenty three
twenty four
25
26
27
28
29
30
31
32
33
34
35
// add a new style to the format drop-down menu 
IF  (  !  Function_exists (  'wpex_styles_dropdown'  )  )  { 
	function wpex_styles_dropdown (  $ Settings  )  {
 
		// Create an array of new styles 
		$new_styles  =  array ( 
			array ( 
				'title' 	=> __ (  'Custom Styles' ,  'wpex'  ) , 
				'items' 	=>  array ( 
					array ( 
						'title' 		=> __ ( ' Button ' , 'wpex' ) , 
						'selector' 	=>  'a' , 
						'classes' 	=>  '-button' 
					) , 
					array ( 
						'title' 		=> __ ( 'Highlight' , 'wpex' ) , 
						'inline' 	= >  'span' , 
						'classes' 	=>  'text-highlight' , 
					) , 
				) , 
			) , 
		) ;
 
		// Merge new and old styles 
		$settings [ 'style_formats_merge' ]  =  true ;
 
		// Add new styles 
		$settings [ 'style_formats' ]  =  json_encode (  $new_styles  ) ;
 
		// return 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 particularly useful for shortcodes, because as a user, you don’t have to remember any shortcodes, you can simply click a button and insert it. I don’t mean to add buttons to TinyMCE for all your shortcodes (I hate developers doing this, it’s such a bad practice, it looks terrible), but if you add 1 or more, I will agree Of) If you want to add a bunch, then you should create a sub-menu, which will be introduced in later chapters.

2014-11-22_095258_wpdaxue_com

PHP code-declare new MCE plugin

This code will declare the new MCE plugin, please be sure to change the location of the JavaScript file “MCE-button.js” to match the location of your file (I will give you the code as well in the next subsection), and change “my” This prefix is ​​modified to other more unique characters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
twenty one
twenty two
twenty three
twenty four
25
// function to mount the hook proper 
function my_add_mce_button ( )  { 
	// check the user rights 
	IF  (  ! Current_user_can (  'edit_posts'  )  &&  ! Current_user_can (  'edit_pages'  )  )  { 
		return ; 
	} 
	// Check whether to enable visual editing 
	IF  (  'to true'  == get_user_option (  'rich_editing'  )  )  { 
		the add_filter (  'mce_external_plugins' ,  'my_add_tinymce_plugin'  ) ; 
		the add_filter (  'mce_buttons' ,  'my_register_mce_button'  ) ; 
	} 
} 
the add_action ( 'admin_head' ,  'my_add_mce_button' ) ;
 
// The script 
function that declares the new button my_add_tinymce_plugin (  $plugin_array  )  { 
	$plugin_array [ 'my_mce_button' ]  = get_template_directory_uri ( )  . '/Js/mce-button.js' ; 
	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 js file registered in the “symple_shortcodes_add_tinymce_plugin” function above. It can add a new text button in the editor with “New Button” written on it. When clicked, it will insert the text “WPExplorer.com is awesome!”.

1
2
3
4
5
6
7
8
9
10
11
( function ( )  { 
	tinymce. PluginManager . add ( 'my_mce_button' , function ( editor, url )  { 
		editor. addButton ( 'my_mce_button' , { 
			text :  'New Button' ,
			icon :  false ,
			onclick : function ( )  { 
				editor. insertContent ( 'WPExplorer.com is awesome!' ) ; 
			} 
		} ) ; 
	} ) ; 
} ) ( ) ;

Add custom icons to the new MCE button

Above I introduced how to add a new button “New Button” in the editor, which is not perfect… The following will show you how to add your own custom icon.

Load your CSS style sheet

Use this function to load a new style sheet to your admin panel for use-some plugins/themes may have added a style sheet, so if your /plugin does this, skip this and just add custom CSS and Adjusted JS (as shown below).

1
2
3
4
function my_shortcodes_mce_css ( )  { 
	wp_enqueue_style ( 'symple_shortcodes-TC' , plugins_url ( '/css/my-mce-style.css' ,  __FILE__ )  ) ; 
} 
the add_action (  'admin_enqueue_scripts' ,  'my_shortcodes_mce_css'  ) ;

Your custom css

1
2
3
i . my - mce - icon { 
	background - image : url ( 'Your icon address' ) ; 
}

Adjust your js

Now, simply adjust the js you added before, delete the text parameter, and add a css class name instead.

1
2
3
4
5
6
7
8
9
10
( function ( )  { 
	tinymce . PluginManager . add ( 'my_mce_button' ,  function ( editor , url )  { 
		editor . addButton (  'my_mce_button' ,  { 
			icon :  'my-mce-icon' , 
			onclick :  function ( )  { 
				editor . insertContent ( 'WPExplorer.com is awesome!' ) ; 
			} 
		} ) ; 
	} ) ; 
} ) ( ) ;

Add a button submenu

2014-11-22_100557_wpdaxue_com

I mentioned earlier that 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 custom button for a submenu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
twenty one
twenty two
twenty three
twenty four
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
( 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 :  'Sub Item 1' ,
							onclick : function ( )  { 
								editor. insertContent ( 'WPExplorer.com is awesome!' ) ; 
							} 
						} ,
						 { 
							text :  'Sub Item 2' ,
							onclick : function ( )  { 
								editor. insertContent ( 'WPExplorer.com is awesome!' ) ; 
							} 
						} 
					] 
				} ,
				 { 
					text :  'Item 2' ,
					menu :  [ 
						{ 
							text :  'Sub Item 1' ,
							onclick : function ( )  { 
								editor. insertContent ( 'WPExplorer.com is awesome!' ) ; 
							} 
						} ,
						 { 
							text :  'Sub Item 2' ,
							onclick : function ( )  { 
								editor. insertContent ( 'WPExplorer.com is awesome!' ) ; 
							} 
						} 
					] 
				} 
			] 
		} ) ; 
	} ) ; 
} ) ( ) ;

Add a popup

In the above example, you may notice that each button only needs to insert the text “WPExplorer.com is awesome!” This is cool, but if you create a pop-up window, the user can change the inserted text, is it cooler? ? Realize it now!

2014-11-22_101017_wpdaxue_com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
twenty one
twenty two
twenty three
twenty four
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
( 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 :  '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  +  '"]' ) ; 
									} 
								} ) ; 
							} 
						} 
					] 
				} 
			] 
		} ) ; 
	} ) ; 
} ) ( ) ;

Cool… what’s next?

Good question! Now is the time for you to add these great adjustments to your plugin or to be compatible with the new TinyMCE editor in WordPress 3.9.