Integrating CKEditor 5 In Laravel 10 Using Vite

Reference: https://manhdandev.com [https://manhdandev.com/integrating-ckeditor-5-in-laravel-10-using-vite.html]

CKEditor 5

CKEditor 5 is a JavaScript-rich text editor with many features and customization capabilities.

CKEditor 5 features a modern MVC architecture, custom data model, and virtual DOM, delivering outstanding performance and scalability.

Native integration with Angular, React, and Vue.js is available for convenience and is compatible with Electron and mobile devices (Android, iOS).

Laravel Vite

Laravel Vite combines the Laravel PHP framework and Vite, a modern build tool for user interface development. It allows you to use Vite as a user interface building system for your Laravel applications.

Vite is known for its fast development servers and efficient build process.

It leverages native ES modules, with powerful integration features and extremely fast Hot Module Replacement (HMR) capabilities.

Build CKEditor 5 by Laravel Vite

In this article, I will show you how to build CKEditor 5 using Laravel Vite in a Laravel project (The version applied in the article is Laravel 10).

Before you begin, make sure you have installed Node.js version 14.18 or higher, or version 16 or higher, as this is required to use Vite.

First, we will initialize a new Laravel project. You can do this using the following command:

composer create-project laravel/laravel ckeditor5

Next, we will install the basic packages of CKEditor 5 including the Editor base, Editor plugins, and Editor theme.

Here is a sample list of basic plugins:

npm install --save @ckeditor/ckeditor5-theme-lark \
  @ckeditor/ckeditor5-autoformat \
  @ckeditor/ckeditor5-basic-styles \
  @ckeditor/ckeditor5-block-quote \
  @ckeditor/ckeditor5-editor-classic \
  @ckeditor/ckeditor5-essentials \
  @ckeditor/ckeditor5-heading \
  @ckeditor/ckeditor5-link \
  @ckeditor/ckeditor5-list \
  @ckeditor/ckeditor5-paragraph

Once your CKEditor 5 has all the necessary plugins, we can proceed with integrating with Vite.

There is an official plugin that helps us with this purpose. This plugin handles loading SVG icons and Styles from packages and theme packages. You can install it using the command below:

npm install --save @ckeditor/vite-plugin-ckeditor5

After installing the above plugin, it still cannot work, we have to add it to Vite's configuration by editing the vite.config.js file with the following content:

import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );
 
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/ckeditor.css', 'resources/js/ckeditor.js'],
            refresh: true,
        }),
        ckeditor5({
            theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
        }),
    ],
});

Next, we will create the file ckeditor.js in the folder src/resources/js with the following content:

import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Link } from '@ckeditor/ckeditor5-link';
import { List } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Heading,
    Link,
    List,
    Paragraph,
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'blockQuote',
            'undo',
            'redo',
        ]
    },
    language: 'en'
};


ClassicEditor
    // Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
    .create( document.querySelector( '#editor' ))
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

Since the default height of the Editor is somewhat limited, we will adjust it through CSS. Create a file ckeditor.css located in the folder src/resources/css with the following content:

.ck-editor__editable_inline {
    min-height: 400px;
}

CKEditor 5 build configuration using Laravel Vite is ready, but currently, we do not have an interface to display the Editor. Therefore, we will edit the file welcome.blade.php in the folder src/resources/views with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CKEditor 5 – Classic Editor</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    @vite(['resources/css/ckeditor.css', 'resources/js/ckeditor.js'])
</head>
<body>
    <div class="col-lg-8 mx-auto p-3 py-md-5">
    <main>
        <div id="editor">
            <p>This is some sample content.</p>
        </div>
    </main>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The results of the work you have done are waiting for you to discover!

After completing the above steps, now it's time for us to explore the results of our efforts together.

Please execute the following command to build CKEditor 5 using Laravel Vite:

npm run build

Finally, let's open the browser and visit the address http://127.0.0.1 to admire the results we created ourselves

Reference: manhdandev

Integrating CKEditor 5 In Laravel 10 Using Vite