Use CKEditor with Vue.js in Laravel

Every developer write codes in different ways. And during coding, we use many libraries or plugins to reduce time. It’s always a better solution to use some other's code to solve a common problem.

Many of us use CKEditor as a document editor in the input field. It is very easy to use in HTML and integrate into a project. But when it comes to using in Vue.js it's not working if we add it the same way we add in plain HTML or project.

I faced the same problem to use it one of my projects. And the documentation helped me to use it but there is a problem I faced to use it. So, why not I share the solution with you?

I assume all of you who read this already know how to set up a Laravel and Vue.js project. You already working with a Laravel and Vue.js project and having an issue with CKEditor in your project.

first, you need to run this command to add CKEditor to your project.

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

then you need to enable the CKEditor component in your application. There are 2 ways to do so. one is direct script include and another is by using ES6 module imports. I prefer the second method which is ES6 module imports.

Now we need to create an editor instance. To create an editor instance, we have to import the editor build and the component modules into the root file of our application (it is the ‘resources/js/app.js’ file unless you change its name.). These two lines of code create the editor instance.

import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.use( CKEditor );

We are done with the creating instance. Now, we need to add some codes to the component where we want to use CKEditor. In my case, I want to use this at my post.vue component file, so I simply put these lines of code at return function, and at the begging of the script, we also need to import the editor.

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Form from 'vform';
    export default {
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Your Post Content</p>',
                editorConfig:{
                },

                form: new Form({
                    post_text: '',
                    post_title: '',
                    post_image: ''
                })
            }
        }
</script>

Then we will add the CKEditor in the template tag.

<template>
    <ckeditor :editor="editor" v-model="form.post_text" :config="editorConfig"></ckeditor>
</template>

It will show the CKEditor perfectly. But If we want to take the input from CKEditor and submit through the form we need to do something more. we need to add tag-name=”textarea” in CKEditor. After that, we will get the input and submit through the form. The full code is here.