TL;DR Question
- How do I create a submenu for my classes with
style_format? - 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?
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' );
1 Answer
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' );
