CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

MentionConfig (mention)

@ckeditor/ckeditor5-mention/src/mention

interface
See source

The configuration of the mention feature.

Read more about configuring the mention feature.

ClassicEditor
	.create( editorElement, {
		mention: ... // Mention feature options.
	} )
	.then( ... )
	.catch( ... );

See all editor options.

Filtering

Properties

  • commitKeys : Array.<Number>

    The configuration of the custom commit keys supported by the editor.

    See source
    	ClassicEditor
		.create( editorElement, {
			plugins: [ Mention, ... ],
			mention: {
				// [ Enter, Space ]
 				commitKeys: [ 13, 32 ]
				feeds: [
					{ ... }
					...
				]
			}
		} )
		.then( ... )
		.catch( ... );

    Custom commit keys configuration allows you to customize how users will confirm the selection of mentions from the dropdown list. You can add as many mention commit keys as you need. For instance, in the snippet above new mentions will be committed by pressing either Enter or Space (13 and 32 key codes respectively).

    Defaults to [ 13, 9 ] // [ Enter, Tab ]

  • dropdownLimit : Number

    The configuration of the custom number of visible mentions.

    See source

    Customizing the number of visible mentions allows you to specify how many available elements will the users be able to see in the dropdown list. You can specify any number you see fit. For example, in the snippets below you will find the dropdownLimit set to 20 and Infinity (this will result in showing all available mentions).

    	ClassicEditor
		.create( editorElement, {
			plugins: [ Mention, ... ],
			mention: {
 				dropdownLimit: 20,
				feeds: [
					{ ... }
					...
				]
			}
		} )
		.then( ... )
		.catch( ... );

	ClassicEditor
		.create( editorElement, {
			plugins: [ Mention, ... ],
			mention: {
 				dropdownLimit: Infinity,
				feeds: [
					{ ... }
					...
				]
			}
		} )
		.then( ... )
		.catch( ... );

    Defaults to 10

  • feeds : Array.<MentionFeed>

    The list of mention feeds supported by the editor.

    See source
    ClassicEditor
	.create( editorElement, {
		plugins: [ Mention, ... ],
		mention: {
			feeds: [
				{
					marker: '@',
					feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
				},
				...
			]
		}
	} )
	.then( ... )
	.catch( ... );

    You can provide many mention feeds but they must use different markers. For example, you can use '@' to autocomplete people and '#' to autocomplete tags.