2

TL;DR Question

  1. How do I create a submenu for my classes with style_format?
  2. Can I append a submenu to the existing menu?

With the new Styleselect in TinyMCE 4.0 there's a bunch of predefined menus, Headers, Inline, Block, and Alignment. Is there a way to keep these menus but append a new Classes menu with subitems of developer defined classes?

Style Select Drop Down Menu

The above picture is pretty much what I'm going for. I can add classes via this filtering function - The problem is that it remove all the predefined menu items (Headings through Alignment) and replaces them with just my class.

function myformatTinyMCE($in) { $style_formats = array( array( 'title' => 'Blue Color', 'selector' => 'p,strong,u,em,ul,ol,a', 'classes' => 'blueColor', 'wrapper' => false, ) ); $in['style_formats'] = json_encode( $style_formats ); return $in; } add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

I looked at the TinyMCE style_formats Documentation to try and replicate what they do but it looks like they may have predefined styles connected to keywords, like the alignments so I'm not sure if it's possible. I was able to replicate the submenu but wasn't able to apply it as it is a class and not a direct style="" format. 

function myformatTinyMCE($in) { $style_formats = array( array( 'title' => 'Classes', 'items' => array( array( 'title' => 'Blue Color', 'icon' => 'alignleft', 'format' => 'blueColor' ) ) ) ); $in['style_formats'] = json_encode( $style_formats ); return $in; } add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
Improve this question

1 Answer 1

Reset to default
2

EDIT

The quick and easy method is just a simple setting: style_formats_merge...

function myformatTinyMCE($in) { $style_formats = array( array( 'title' => 'Classes', 'items' => array( array( 'title' => 'Blue Color', 'selector' => 'p,strong,u,em,ol,ul', 'classes' => 'blueColor' ) ) ) ); $in['style_formats_merge'] = true; $in['style_formats'] = json_encode( $style_formats ); return $in; } add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Everything below this point is a much longer way to go about it but may be helpful to future viewers so I'll keep it in.

So pretty much right after I asked this question I found the answer on the TinyMCE Forms: Adding Class to TinyMCE style_formats - not the last line of the code. In WordPress format it looks like this:

function myformatTinyMCE($in) { $style_formats = array( array( 'title' => 'Classes', 'items' => array( array( 'title' => 'Blue Color', 'selector' => 'p,strong,u,em,ol,ul', 'classes' => 'blueColor' ) ) ) ); $in['style_formats'] = json_encode( $style_formats ); return $in; } add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Unfortunately it still clears out all the old TinyMCE Menu Items. I then used the style_format docs to recreate the menu items. The long version looks like this (without the class).

function myformatTinyMCE($in) { $style_formats = array( array( 'title' => 'Headers', 'items' => array( array( 'title' => 'Header 1', 'format' => 'h1' ), array( 'title' => 'Header 2', 'format' => 'h2', ), array( 'title' => 'Header 3', 'format' => 'h3' ), array( 'title' => 'Header 4', 'format' => 'h4' ), array( 'title' => 'Header 5', 'format' => 'h5' ), array( 'title' => 'Header 6', 'format' => 'h6' ) ) ), array( 'title' => 'Inline', 'items' => array( array( 'title' => 'Bold', 'icon' => 'bold', 'format' => 'bold' ), array( 'title' => 'Italic', 'icon' => 'italic', 'format' => 'italic' ), array( 'title' => 'Underline', 'icon' => 'underline', 'format' => 'underline' ), array( 'title' => 'Strikethrough', 'icon' => 'strikethrough', 'format' => 'strikethrough' ), array( 'title' => 'Superscript', 'icon' => 'superscript', 'format' => 'superscript' ), array( 'title' => 'Subscript', 'icon' => 'subscript', 'format' => 'subscript' ), array( 'title' => 'Code', 'icon' => 'code', 'format' => 'code' ) ) ), array( 'title' => 'Blocks', 'items' => array( array( 'title' => 'Paragraph', 'format' => 'p' ), array( 'title' => 'Blockquote', 'format' => 'blockquote' ), array( 'title' => 'Div', 'format' => 'div' ), array( 'title' => 'Pre', 'format' => 'pre' ) ) ), array( 'title' => 'Alignment', 'items' => array( array( 'title' => 'Left', 'icon' => 'alignleft', 'format' => 'alignleft' ), array( 'title' => 'Center', 'icon' => 'aligncenter', 'format' => 'aligncenter' ), array( 'title' => 'Right', 'icon' => 'alignright', 'format' => 'alignright' ), array( 'title' => 'Justify', 'icon' => 'alignjustify', 'format' => 'alignjustify' ) ) ) ); $in['style_formats'] = json_encode( $style_formats ); return $in; } add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

You can just append the classes array in the first function to this existing function to add it as the last menu item. Here's the compact version, with the class:

function myformatTinyMCE($in) { $style_formats = array( array('title'=>'Headers','items'=>array(array('title'=>'Header 1','format'=>'h1'),array('title'=>'Header 2','format'=>'h2',),array('title'=>'Header 3','format'=>'h3'),array('title'=>'Header 4','format'=>'h4'),array('title'=>'Header 5','format'=>'h5'),array('title'=>'Header 6','format'=>'h6'))),array('title'=>'Inline','items'=>array(array('title'=>'Bold','icon'=>'bold','format'=>'bold'),array('title'=>'Italic','icon'=>'italic','format'=>'italic'),array('title'=>'Underline','icon'=>'underline','format'=>'underline'),array('title'=>'Strikethrough','icon'=>'strikethrough','format'=>'strikethrough'),array('title'=>'Superscript','icon'=>'superscript','format'=>'superscript'),array('title'=>'Subscript','icon'=>'subscript','format'=>'subscript'),array('title'=>'Code','icon'=>'code','format'=>'code'))),array('title'=>'Blocks','items'=>array(array('title'=>'Paragraph','format'=>'p'),array('title'=>'Blockquote','format'=>'blockquote'),array('title'=>'Div','format'=>'div'),array('title'=>'Pre','format'=>'pre'))),array('title'=>'Alignment','items'=>array(array('title'=>'Left','icon'=>'alignleft','format'=>'alignleft'),array('title'=>'Center','icon'=>'aligncenter','format'=>'aligncenter'),array('title'=>'Right','icon'=>'alignright','format'=>'alignright'),array('title'=>'Justify','icon'=>'alignjustify','format'=>'alignjustify'))) ,array( 'title' => 'Classes', 'items' => array( array( 'title' => 'Blue Color', 'selector' => 'p,strong,u,em,ol,ul', 'classes' => 'blueColor' ) ) ) ); $in['style_formats'] = json_encode( $style_formats ); return $in; } add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
Improve this answer
2
  • Excellent. Why isn't $in['style_formats_merge'] = true; documented anywhere! Where did you find it? Commented Jun 22, 2017 at 10:56
  • @Ralphonz TinyMCE Documentation. Commented Jun 22, 2017 at 14:22

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.