CODEWITHSUNDEEP
javascriptwordpresstinymce-4
Kenneth Odle
Kenneth Odle

Reputation: 71

How to add a separator in a TinyMCE dropdown menu

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.)

Upvotes: 1

Views: 2021

Answers (4)

rebiscosg
rebiscosg

Reputation: 41

I know that this is an old thread. But, you can use 'separator' as type.

const init = {
  ...,
  setup: (editor) => {
    editor.ui.registry.addMenuButton('split-links', {
      icon: 'link',
      tooltip: 'Insert link',
      fetch: (callback) => {
        const items = [
          {
            type: 'menuitem',
            text: 'Internal link',
            onAction: () => {
             //Define action here
            }
           },
           {
             type: 'separator'
           },
           {
             type: 'menuitem',
             text: 'External link',
             onAction: () => {
              //Define action here
             }
           }
        ];
        callback(items);
      }
    }
  }
}

Upvotes: 4

Rich Kosiba
Rich Kosiba

Reputation: 11

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: '|'
}

Upvotes: 1

Kenneth Odle
Kenneth Odle

Reputation: 71

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.

horizontal separator in drop-down menu

Upvotes: 5

kopernik_elfka
kopernik_elfka

Reputation: 66

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 | .

Upvotes: 2

Related Questions