How To Use Ckeditor 5 In Laravel 8 With Vue 3 - FreeCodeBlog

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. Ckeditor 5 is the most popular rich text editor that uses to write web articles. So do you have any Laravel web application that needs to add ckeditor 5 rich text editor? Yes, I have. Okay then you can use ckeditor 5 in laravel 8 with vue 3 to create a rich text editor. Now are you ready to use ckeditor 5 rich text editor in laravel 8, vue 3? Yes. You must have a little knowledge about Laravel 8 and vue 3 to continue use ckeditor 5 tutorial. So let's start install ckeditor 5 on laravel 8 with vue 3.

Wait a minute, have you installed Laravel UI?  You will need to install the laravel ui package to continue this ckeditor 5 tutorial. Listen friends, In this ckeditor 5 tutorial i will use laravel ui version 3. You can use others user authentication package for vue 3 and ckeditor 5 in laravel 8. Before continue this tutorial please read laravel ui package setup in laravel 8 with vue 3 tutorial.

1. Install Ckeditor 5.

Do you have an installed laravel 8 project with vue 3? Now want to use ckeditor 5 in laravel 8 with vue 3? You can Install Ckeditor 5 using npm to make rich text editor in your laravel 8 With Vue 3 project. Remember I will install ckeditor 5 build classic and ckeditor 5 vue version to make a rich ckeditor 5.

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

2. Ckeditor 5 In App Js File.

Do you have an installed ckeditor 5 in laravel 8 project with vue 3? If yes, then now import ckeditor 5 in laravel app js. Next you need to use ckeditor vue file in laravel app js file. Please don't forget to read our previous tutorial. 

/*
| app.js
*/
import CKEditor from '@ckeditor/ckeditor5-vue';
app.use(CKEditor);

3. Ckeditor 5 In Vue File.

Does your ckeditor 5 laravel project have tailwind css installed? Tailwind css! Yes, tailwind css. I will use tailwind css for this tutorial. To use ckeditor 5 you need to install tailwind css in laravel ui project. Don't forget to read install tailwind css in laravel with laravel ui tutorial to continue this tutorial.

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

3. Ckeditor 5 Plugins.

Would you like to use the ckeditor 5 plugin in laravel 8 with vue 3? You can use ckeditor 5 plugins like code block, text-alignment, table and more. You should read how to install and use ckeditor 5 plugins in laravel 8 with vue js 3 tutorial.

Okay so this is for today. See you again next tutorials. Thanks