Ckeditor 5 Mention (@) Plugin Implementation Complete Tutorial - FreeCodeBlog

Ckeditor 5 mention (@)! Are you ready to implement a mention (@) system in ckeditor 5. Yes. Okay then you must need to read this ckeditor 5 mention (@) complete tutorial to develop mention system for your project. I hope you have a installed ckeditor 5 editor on your project.

1. Install Ckeditor 5 Mention Plugin.

You must need to install ckeditor 5 mention plugin in your project to make mention (@) system like @masum7323. Before you start installing the ckeditor 5 mention plugin to develop a mention system, please make sure that your project has an installed "@ckeditor/ckeditor5-build-classic": "^version" editor.

npm install --save @ckeditor/ckeditor5-mention

2. Import Ckeditor 5 Hashtag Plugin.

Have you installed the ckeditor 5 hashtag (mention) plugin? Yes. Good, Now you need to import hashtag plugin in your project.

import Mention from '@ckeditor/ckeditor5-mention/src/mention';

3. Use Ckeditor 5 Mention Plugin.

I hope you have installed ckeditor 5 editor and mention plugin in your project. Now it's time to use mention system in ckeditor 5.

ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ Mention,],
            mention: {
                feeds: [
                    {
                    marker: '@',
                    feed: [ '@masum7323',]
                    }
                ]
            }
        } )
        .then()
        .catch();

Okay so this is for today. See you again next tutorials. Thanks