How To Install And Use Ckeditor 5 Plugins In Laravel 8 With Vue Js 3 - FreeCodeBlog

Last updated: Nov 16, 2021

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. Ckedditor 5 is a popular rich text editor and we can easily install and use ckeditor 5 plugins in ckeditor 5 with laravel 8, vue3.

 

How To Install And Use Ckeditor 5 Plugins In Laravel 8 With Vue Js 3
How To Install And Use Ckeditor 5 Plugins In Laravel 8 With Vue Js 3

 

1. Ckeditor 5.
Do you have an installed ckeditor 5 project in laravel 8 with vue 3? No!, Before continue please read how to use ckeditor 5 in laravel 8 with vue 3 tutorial. Now if you want to install and use ckeditor 5 plugins like text alignment, code block, block quote in laravel 8 with vue 3 then follow the next steps.

 

1. Install Ckeditor 5 Plugins.

For example, if you wish to install the text alignment feature:

 

npm install --save-dev @ckeditor/ckeditor5-alignment

 

Edit the code that initializes the editor:

 

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- ADDED

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, Alignment ],     // <--- MODIFIED
        toolbar: [ 'bold', 'italic', 'alignment' ]                       // <--- MODIFIED
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

 

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
Use Laravel Sanctum To Make Laravel Api Authentication For Users

In this tutorial I will use laravel sanctum package to make laravel api authentication for users. For spa authentication or laravel vue api authent... 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

Laravel Ui Package Setup In Laravel 8 With Vue 3

Want to use vue 3 in laravel ui? Laravel ui is a first party user authentication package and you can easily use it with laravel 8 and vue 3. So let... 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

Upgrade Laravel 7 To 8 With Others Laravel Packages Like Laravel Ui

Do you have any Laravel 7 version projects? Yes. Okay want to upgrade laravel 7 projects? Yes. Which laravel version? Have you used Bootstrap, Tail... Read More