How to Add CKEditor in Your Vue App

In this tutorial i am going to show you that how we can add WYSIWYG editor or ckeditor in our vue js project. You can also add it in your laravel vue js project. After completing this tutorial you will learn how to add ckeditor or WYSIWYG  your vue laravel project.

Here i will show native integration of CKEditor 5 with Vue.js in your vue app. You know without good text editor we can not formatting our article. Using this editor we can easily format or manipulate our content before reaching the end user.

So let's see how to add ckeditor vue js example.

Preview : 

Step 1 : Install Editor

The easiest way to use CKEditor 5 in your Vue.js application is to install it via npm command. So run below command to install it.

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

After doing that you have to enable the component globally.

Step 2 : Enable the component globally

Enable the component globally in your application:

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

Vue.use( CKEditor );

Step 3 : Use Editor in Your Component

In this step we have to show our installed ckeditor in our vue component. To do it, just follow below code and paste it in your vue application.

One more thing that you can also use the component with Vue CLI or simply load it from the CDN. Hope it can help you.