Integrate CKEditor in Laravel Inertia with Vue

Plugins like CKEditor that are used to use rich content in our applications, and by this, we mean using styles as we do in Open Office, Google Docs, or Microsoft Office, to name a few, on our website, there are a lot of these plugins and there is something for all tastes, but there is one that has been maintained over time and offers excellent quality, efficiency, and very customizable, and this is none other than CKEditor and we are going to know how we can integrate it into a Laravel project, specifically in Laravel with Inertia scaffolding.

Laravel Inertia, when using Vue as a client-side view, we have to use the integration with Vue, and this is one of the huge advantages that CKEditor has, and that is that it is available for a large number of JavaScript technologies such as React, Angular, Wordpress, etc. In the case of Inertia with Vue, we need to install two packages, the CKEditor itself, and the Vue plugin:

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

CKEditor is a text editor like word, but, to use it in our web applications, therefore, it is HTML technology and it is not more than another plugin of the WYSIWYG type that we have at our disposal, it is open source and provides a text processor Web; It's easy to recommend, has been on the market for a long time, and gets regular updates, so it's a great deal to use in our projects.

CKEditor has numerous functionalities, such as: support for tables, image preview (the part of configuring the images requires additional configuration both at the CKEditor level and at the level of Laravel or the backend you are using), as well as any other media file, text formatting tools, etc. Therefore, CKEditor is very useful for creating and editing web content with an easy-to-use interface and without the need for advanced programming knowledge. There are different versions of CKEditor, such as CKEditor 4 and CKEditor 5, each with its own features and functionality that you can use.

Now, it is configured at the project level in Vue, like the rest of the plugins, we add CKEditor in our Vue file:

resources/js/app.js

import CKEditor from '@ckeditor/ckeditor5-vue';
createInertiaApp({
    title: (title) => '${title} - ${appName}',
    resolve: (name) => require('./Pages/${name}.vue'),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(Oruga)
            .use(CKEditor)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

In the previous example, other plugins have been configured, such as Caterpillar UI, in which we have several posts that you can review, but it is important to see is the one that refers to CKEditor.

And finally, we are ready to use it; The following script is taken from my complete course on Laravel Inertia, and specifically, we have a textarea field in which we convert it to WYSIWYG using Ckeditor, that is, a rich text container:

resources/js/Pages/Dashboard/Post/Save.vue

<div class="col-span-6">
    <jet-label value="Text" />
     <!-- <textarea
         class="rounded-md w-full border-gray-300"
         v-model="form.text"></textarea> -->
   <ckeditor :editor="editor.editor" v-model="form.text"></ckeditor>
   <jet-input-error :message="errors.text" />
</div>
***
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
export default {
  components: {
    ***
    ClassicEditor
  },
  data() {
    return {
      editor: {
        editor: ClassicEditor
      }
    }
  },
}

It is important to note that the import of the Classic Editor plugin which is CKEditor:

import ClassicEditor from "@ckeditor/ckeditor5-build-classic"

We create a component, and indicate the v-model:

<ckeditor v-model="form.text"></ckeditor>

In addition to, indicate the basic settings using the editor option:

<ckeditor :editor="editor.editor" v-model="form.text"></ckeditor>

With these simple steps, we have the following result:

As you can see, its integration does not vary much from what we already handle with Vue, by associating a v-model, we will receive all the HTML code generated through our CKEditor on the server, ready to be saved in the database. or perform any other operation that you consider, this is one of the many topics that we cover in the complete course with Laravel Inertia.

08-04-2023 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Integrate CKEditor in Laravel Inertia with Vue