Report an issue
Typedef

MentionFeed (mention)

@ckeditor/ckeditor5-mention/src/mention

typedef
Object

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 => {
        return tags
            // Filter the tags list.
            .filter( tag => {
                return tag.toLowerCase().includes( queryText.toLowerCase() );
            } )
            // Return 10 items max - needed for generic queries when the list may contain hundreds of elements.
            .slice( 0, 10 );
    }
};

const tags = [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ];

// Asynchronous callback.
const mentionFeedPlaceholders = {
    marker: '$',
    feed: searchString => {
        return getMatchingPlaceholders( searchString );
    }
};

function getMatchingPlaceholders( searchString ) {
    return new Promise( resolve => {
        doSomeXHRQuery( result => {
            // console.log( result );
            // -> [ '$name', '$surname', '$postal', ... ]

            resolve( result );
        } );
    } );
}

Filtering

Properties

  • feed : Array.<MentionFeedItem> | function

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

  • itemRenderer : function

    A function that renders a MentionFeedItem to the autocomplete panel.

  • marker : String

    The character which triggers autocompletion for mention. It must be a single character.

  • Specifies after how many characters the autocomplete panel should be shown.

    Defaults to 0