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

Last updated: Jan 19, 2022

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.

 

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

 

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

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
How To Install And Use Ckeditor 5 Plugins In Laravel 8 With Vue Js 3

You need to use ckeditor 5 (code block, text-alignment, text-highlight, block-quote, image-insert) plugins in laravel 8 with vue js 3 project.... Read More

Ckeditor 5 Mention With Vue Js Full Tutorial

Ckeditor 5 mention (@) with vue js! Really? Yes. You can easily develop mention (@) system in vue js using ckeditor 5. Just follow bellow step slow... Read More

Ckeditor 5 Hashtag (#) System Developmemt Complete Tutorial

Ckeditor 5 hashtag (#)! Are you ready to develop a hashtag (#) system in ckeditor 5. Yes. Okay then you must need to read this ckeditor 5 hashtag (... Read More

Solve Ckeditor 5 Code Block Plugin Not Working In Laravel

Ckeditor 5 code block plugin not working in laravel? No. Do you have a programming laravel project and want to use code block ckeditor 5 plugin in... Read More

How To Use Ckeditor 5 In Laravel 8 With Vue 3

Laravel 8, Vue 3, Ckeditor 5. Do you really want to use ckeditor 5 on laravel 8 with vue 3? Yes. Do you know about ckeditor 5? A little bit. Ckedit... Read More