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

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.

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