Ckeditor 5 Hashtag (#) System Developmemt Complete Tutorial - FreeCodeBlog

Last updated: Jan 18, 2022

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 (#) complete tutorial to develop hashtag system for your project. I hope you have a installed ckeditor 5 editor on your project.

 

Ckeditor 5 Hashtag (#) System Developmemt Complete Tutorial
Ckeditor 5 Hashtag (#) System Developmemt Complete Tutorial

 

1. Install Ckeditor 5 Hashtag Plugin.

You must need to install ckeditor 5 mention plugin in your project to make hashtag (#) system like #php #laravel. Before you start installing the ckeditor 5 mention plugin to create a hashtag 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 Hashtag Plugin.

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

 

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Mention,],
        mention: {
            feeds: [
                {
                marker: '#',
                feed: [ '#Php', '#Laravel', '#Vue', '#Js']
                }
            ]
        }
    } )
    .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 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

Ckeditor 5 Mention (@) Plugin Implementation Complete Tutorial

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