How to add a separator in a TinyMCE dropdown menu

add list in tinymce
list tinymce
tinymce toolbar list
tinymce include images
tinymce add links
tinymce insert image
tinymce list indent
tinymce integration list

I am working on a WordPress plugin and I can add TinyMCE buttons that present a dropdown menu when clicked. However, I would like to add a horizontal separator (i.e., a horizontal line) to that drop down menu to group options.

I have googled this for some time and the only information I have found is about adding a vertical separator (i.e., a vertical line) between buttons on the menu itself.

Is it possible to add a horizontal separator to a dropdown menu in TinyMCE, and if so, how can I do it? Or is my only option to group these other items by using a submenu?

            ed.addButton('d12-mb-button-2', {
            title:'Add a message block with a custom title',
            type:'menubutton',
            image: url + '/d12-mb-mce-button-2.png',
            menu: [
                    {
                    text: 'Part of a series',
                    value: 'Part',
                    icon: 'icon d12mb-part',
                    onclick: function() {
                        ed.windowManager.open( {
                            title: 'Please enter the data for this message box',
                            body: [{
                                type: 'textbox',
                                name: 'title',
                                label: 'This series of articles is about:'
                            },
                            {
                                type: 'textbox',
                                minHeight: 200,
                                minWidth: 400,
                                multiline: 'true',
                                name: 'description',
                                label: 'Description of this series:'
                            }
                            ],
                            onsubmit: function( epart ) {
                                ed.selection.setContent('[d12-part series="' + epart.data.title + '"]' + epart.data.description + '[/d12-part]');
                            }
                        });
                    }
                }, // End of "Part" 
                {
                    text: 'Add a support message',
                    value: 'Support',
                    icon: 'icon d12mb-support',
                    onclick: function() {
                        ed.windowManager.open( {
                            title: 'Please enter the support information',
                            body: [{
                                type: 'textbox',
                                name: 'title',
                                label: 'Support title:'
                            },
                            {
                                type: 'textbox',
                                minHeight: 200,
                                minWidth: 400,
                                multiline: 'true',
                                name: 'description',
                                label: 'Support message:'
                            }
                            ],
                            onsubmit: function( esupport ) {
                                ed.selection.setContent('[d12-support title="' + esupport.data.title + '"]' + esupport.data.description + '[/d12-support]');
                            }
                        });
                    }
                }, // End of "Support"

I need to add a horizontal separator right after the 'end of "Part"' item.

(FWIW, the entire file I am working on is here.)

All of the documentation I've found is for inserting vertical separators between groups of icons on the menu bar. I haven't been able to find any information on adding horizontal separators between groups of items in a drop-down menu.

However, after a lot of experimentation, I found that this code:

                    {
                    text: '|'
                },

will add a horizontal separator.

javascript, All of the documentation I've found is for inserting vertical separators between groups of icons on the menu bar. I haven't been able to find any  This example shows you how to add a simple menu button to TinyMCE’s toolbar. This demo inserts text at the cursor. The Codepen JS also shows you how to add sub-menus to a menu item.

I'm not suer if I understand you correctly, but if you need a horizontal line like this in the Full Featured Example - (in the drop-down menu Format) - after subscript and before formats, there solution is in the API: Insert a | Pipe character between menu items.

Maybe in your case, you can just rewrite the code to match the pattern here and apply | .

tinymce.ui.Separator, This class is used to create vertical separator between other controls. Public Methods. Method, Defined By. Separator(id:String, s:Object) : Separator constructor. Define the custom toolbar button with the setup callback of the TinyMCE configuration to add it to the editor. This callback is invoked automatically for every initialized editor instance. Access to the UI registry API occurs when the callback receives a reference to the editor instance as its argument. Example of adding a custom menu item

I'm using TinyMCE 4.5.1. Kenneth Odle's solution didn't work for me but did lead me to the correct answer.

To get a horizontal rule on a dropdown menu, create a menu entry like the following:

{
    title: '|'
}

Horizontal Rule plugin, It also adds a toolbar button and a menu item Horizontal line under the Insert menu. Type: String. Example. tinymce.init  + toolbar button + menu item. This plugin adds page break support and enables a user to insert page breaks in the editable area. This is useful where a CMS uses a special separator to break content into pages. It also adds a toolbar button and a menu item Page break under the Insert menu dropdown.

tinymce.ui.DropMenu, This class is used to create drop menus, a drop menu can be a context menu, addSeparator():MenuItem : Adds a menu separator between the menu items. This option allows you to specify which menus should appear on TinyMCE’s menu bar and the items that should appear within the menus themselves. To specify the menus that should appear on TinyMCE’s menu bar, the menu option should be provided with a JavaScript object containing a property for each menu.

Custom toolbar menu button, This demo inserts text at the cursor. The Codepen JS also shows you how to add sub-menus to a menu item. TinyMCE HTML JS Edit on CodePen. This plugin will add a drop down menu to the TinyMCE text editor in Moodle that allows to add language tags to the selected content. These tags are the same used by the multilang2 content filter. The list of languages shown in the dropdown can contain either the full list of Moodle languages, or just the languages available on the site.

User interface options, Configure the editor's appearance, including menu and toolbar controls. displayed in the formatselect dropdown toolbar button and the blockformats menu item. A "|" pipe character to indicate a separator should be added to delineate a group of menu items. If required, create a new icons directory in TINYMCE_BASE . It adds two toolbar buttons called link and unlink and three menu items called link, unlink and openlink. The toolbar button and menu item called link are included in TinyMCE’s default configuration. The link menu item can be found in the Insert menu. The link plugin also includes a context menu and context toolbar.

Comments
  • As was stated in the answer by kopernik_elfka I assume?
  • The page he linked to dealt with menu items, not drop-down menus. But in either case, the code is pretty much the same. I'm surprised this is not documented somewhere.
  • There are many things the official documentation is vague about. thanks!
  • Thanks, but that documentation is for adding vertical separators between menu items (which are icons). I appreciate your taking a look.