CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Module

ui/menubar/utils

@ckeditor/ckeditor5-ui/src/menubar/utils

module

Filtering

Constants

  • DefaultMenuBarItems : MenuBarConfigObject[ 'items' ]

    See source

    The default items configuration of the MenuBarView component. It contains names of all menu bar components registered in the component factory (available in the project).

    Note: Menu bar component names provided by core editor features are prefixed with menuBar: in order to distinguish them from components referenced by the toolbar configuration, for instance, 'menuBar:bold' is a menu bar button but 'bold' is a toolbar button.

    Below is the preset menu bar structure (the default value of config.menuBar.items property):

    [
	{
		menuId: 'file',
		label: 'File',
		groups: [
			{
				groupId: 'export',
				items: [
					'menuBar:exportPdf',
					'menuBar:exportWord'
				]
			},
			{
				groupId: 'import',
				items: [
					'menuBar:importWord'
				]
			},
			{
				groupId: 'revisionHistory',
				items: [
					'menuBar:revisionHistory'
				]
			}
		]
	},
	{
		menuId: 'edit',
		label: 'Edit',
		groups: [
			{
				groupId: 'undo',
				items: [
					'menuBar:undo',
					'menuBar:redo'
				]
			},
			{
				groupId: 'selectAll',
				items: [
					'menuBar:selectAll'
				]
			},
			{
				groupId: 'findAndReplace',
				items: [
					'menuBar:findAndReplace'
				]
			}
		]
	},
	{
		menuId: 'view',
		label: 'View',
		groups: [
			{
				groupId: 'sourceEditing',
				items: [
					'menuBar:sourceEditing'
				]
			},
			{
				groupId: 'showBlocks',
				items: [
					'menuBar:showBlocks'
				]
			},
			{
				groupId: 'previewMergeFields',
				items: [
					'menuBar:previewMergeFields'
				]
			},
			{
				groupId: 'restrictedEditingException',
				items: [
					'menuBar:restrictedEditingException'
				]
			}
		]
	},
	{
		menuId: 'insert',
		label: 'Insert',
		groups: [
			{
				groupId: 'insertMainWidgets',
				items: [
					'menuBar:insertImage',
					'menuBar:ckbox',
					'menuBar:ckfinder',
					'menuBar:insertTable'
				]
			},
			{
				groupId: 'insertInline',
				items: [
					'menuBar:link',
					'menuBar:bookmark',
					'menuBar:comment',
					'menuBar:insertMergeField'
				]
			},
			{
				groupId: 'insertMinorWidgets',
				items: [
					'menuBar:mediaEmbed',
					'menuBar:insertTemplate',
					'menuBar:blockQuote',
					'menuBar:codeBlock',
					'menuBar:htmlEmbed'
				]
			},
			{
				groupId: 'insertStructureWidgets',
				items: [
					'menuBar:horizontalLine',
					'menuBar:pageBreak',
					'menuBar:tableOfContents'
				]
			},
			{
				groupId: 'restrictedEditing',
				items: [
					'menuBar:restrictedEditing'
				]
			}
		]
	},
	{
		menuId: 'format',
		label: 'Format',
		groups: [
			{
				groupId: 'textAndFont',
				items: [
					{
						menuId: 'text',
						label: 'Text',
						groups: [
							{
								groupId: 'basicStyles',
								items: [
									'menuBar:bold',
									'menuBar:italic',
									'menuBar:underline',
									'menuBar:strikethrough',
									'menuBar:superscript',
									'menuBar:subscript',
									'menuBar:code'
								]
							},
							{
								groupId: 'textPartLanguage',
								items: [
									'menuBar:textPartLanguage'
								]
							}
						]
					},
					{
						menuId: 'font',
						label: 'Font',
						groups: [
							{
								groupId: 'fontProperties',
								items: [
									'menuBar:fontSize',
									'menuBar:fontFamily'
								]
							},
							{
								groupId: 'fontColors',
								items: [
									'menuBar:fontColor',
									'menuBar:fontBackgroundColor'
								]
							},
							{
								groupId: 'highlight',
								items: [
									'menuBar:highlight'
								]
							}
						]
					},
					'menuBar:heading'
				]
			},
			{
				groupId: 'list',
				items: [
					'menuBar:bulletedList',
					'menuBar:numberedList',
					'menuBar:multiLevelList',
					'menuBar:todoList'
				]
			},
			{
				groupId: 'indent',
				items: [
					'menuBar:alignment',
					'menuBar:indent',
					'menuBar:outdent'
				]
			},
			{
				groupId: 'caseChange',
				items: [
					'menuBar:caseChange'
				]
			},
			{
				groupId: 'removeFormat',
				items: [
					'menuBar:removeFormat'
				]
			}
		]
	},
	{
		menuId: 'tools',
		label: 'Tools',
		groups: [
			{
				groupId: 'aiTools',
				items: [
					'menuBar:aiAssistant',
					'menuBar:aiCommands'
				]
			},
			{
				groupId: 'tools',
				items: [
					'menuBar:trackChanges',
					'menuBar:commentsArchive'
				]
			}
		]
	},
	{
		menuId: 'help',
		label: 'Help',
		groups: [
			{
				groupId: 'help',
				items: [
					'menuBar:accessibilityHelp'
				]
			}
		]
	}
];

    The menu bar can be customized using the config.menuBar.removeItems and config.menuBar.addItems properties.

  • MenuBarBehaviors : object

    See source

    Behaviors of the MenuBarView component.

  • MenuBarMenuBehaviors : object

    See source

    Behaviors of the MenuBarMenuView component.

  • MenuBarMenuViewPanelPositioningFunctions : Record<string, PositioningFunction>

    See source

    Contains every positioning function used by MenuBarMenuView that decides where the panelView should be placed.

    Top-level menu positioning functions:

    ┌──────┐
│      │
├──────┴────────┐
│               │
│               │
│               │
│            SE │
└───────────────┘

         ┌──────┐
         │      │
┌────────┴──────┤
│               │
│               │
│               │
│ SW            │
└───────────────┘

┌───────────────┐
│ NW            │
│               │
│               │
│               │
└────────┬──────┤
         │      │
         └──────┘

┌───────────────┐
│            NE │
│               │
│               │
│               │
├──────┬────────┘
│      │
└──────┘

    Sub-menu positioning functions:

    ┌──────┬───────────────┐
│      │               │
└──────┤               │
       │               │
       │            ES │
       └───────────────┘

┌───────────────┬──────┐
│               │      │
│               ├──────┘
│               │
│ WS            │
└───────────────┘

       ┌───────────────┐
       │            EN │
       │               │
┌──────┤               │
│      │               │
└──────┴───────────────┘

┌───────────────┐
│ WN            │
│               │
│               ├──────┐
│               │      │
└───────────────┴──────┘

Functions