Ckeditor 5 Mention With Vue Js Full Tutorial - FreeCodeBlog

Last updated: Jan 19, 2022

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

 

Ckeditor 5 Mention With Vue Js Full Tutorial
Ckeditor 5 Mention With Vue Js Full Tutorial

 

1. Install Ckeditor 5 Mention Plugin.

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

    

npm install --save @ckeditor/ckeditor5-mention

 

2. Import Ckeditor 5 Hashtag Plugin.

Have you installed the ckeditor 5 mention plugin? Yes. Good, Now you need to import mention 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.

 

editorConfig: {
    plugins: [ Mention,],
    mention: {
    	feeds: [
    		{
            marker: '@',
            feed: [ '@masum7323',]
             }
         ]
       }
     }

 

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
Implement Moment Js In Laravel With Vue

Want to use human readable date time in laravel vue? Yes! you need to implement moment js in laravel in laravel to use human readable date time. Yo... Read More

Ckeditor 5 Hashtag In Vue Js Complete Tutorial

Ckeditor 5 hashtag (#) in vue js! Really? Yes. You can easily develop hashtag (#) system in vue js using ckeditor 5. Just follow bellow step slowly... Read More

Make One To One Chat Application In Laravel With Vue Js

Today I will make a one to one chat application in laravel with vue js. To making one to one chat application use can easily use jetream user authe... 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

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