Search code examples
ckeditorckeditor5

CKEditor 5: How to use Mentions in Comments?


How to use CKeditor mentions feed element in Ckeditor comments.


Solution

  • Check out the below sample to check how to add the Mention plugin to the comment editor:

    const extraCommentsPlugins = ClassicEditor.builtinPlugins.filter(
        plugin => [ 'Bold', 'Italic', 'Mention' ].includes( plugin.pluginName );
    );
    
    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            toolbar: {
                items: [ 'bold', 'italic', '|', 'comment' ]
            },
            sidebar: {
                container: document.querySelector( '#sidebar' )
            },
            comments: {
                editorConfig: {
                    extraPlugins: extraCommentsPlugins,
                    mention: {
                        feeds: [
                            {
                                marker: '@',
                                feed: [
                                    '@NICK', '@NOHEA',
                                    '@REATHEON', '@FIRE FOX', '@NORMSA'
                                ],
                            }
                        ]
                    }
                }
            }
        } )
        .catch( error => console.error( error ) );