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>

    See source

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

    	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

    See source

    The configuration of the custom number of visible mentions.

    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>

    See source

    The list of mention feeds supported by the editor.

    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.