MentionFeed (mention)
@ckeditor/ckeditor5-mention/src/mentionconfig
The mention feed descriptor. Used in config.mention
.
See MentionConfig
to learn more.
// Static configuration.
const mentionFeedPeople = {
marker: '@',
feed: [ '@Alice', '@Bob', ... ],
minimumCharacters: 2
};
// Simple synchronous callback.
const mentionFeedTags = {
marker: '#',
feed: ( searchString: string ) => {
return tags
// Filter the tags list.
.filter( tag => {
return tag.toLowerCase().includes( queryText.toLowerCase() );
} )
}
};
const tags = [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ];
// Asynchronous callback.
const mentionFeedPlaceholders = {
marker: '$',
feed: ( searchString: string ) => {
return getMatchingPlaceholders( searchString );
}
};
function getMatchingPlaceholders( searchString: string ) {
return new Promise<Array<MentionFeedItem>>( resolve => {
doSomeXHRQuery( result => {
// console.log( result );
// -> [ '$name', '$surname', '$postal', ... ]
resolve( result );
} );
} );
}
Filtering
Properties
-
dropdownLimit : number | undefined
module:mention/mentionconfig~MentionFeed#dropdownLimit
Specify how many available elements per feeds will the users be able to see in the dropdown list. If it not set, limit is inherited from MentionConfig.
-
feed : Array<MentionFeedItem> | FeedCallback
module:mention/mentionconfig~MentionFeed#feed
Autocomplete items. Provide an array for a static configuration (the mention feature will show matching items automatically) or a function which returns an array of matching items (directly, or via a promise). If a function is passed, it is executed in the context of the editor instance.
-
itemRenderer : ItemRenderer | undefined
module:mention/mentionconfig~MentionFeed#itemRenderer
A function that renders a
MentionFeedItem
to the autocomplete panel. -
marker : string
module:mention/mentionconfig~MentionFeed#marker
The character which triggers autocompletion for mention. It must be a single character.
-
minimumCharacters : number | undefined
module:mention/mentionconfig~MentionFeed#minimumCharacters
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.