javascript vue.js webpack vite ckeditor5

How to integrate custom bulid CKEditor 5 in my Vue App

I have made a custom build from CKEditor 5 Online Builder and Downloaded it but It is build in Webpack and I'm using Vite in Vue 3 Project.

I have tried below code:

<script setup>
import CKEditor from "@/ckeditor5-custom-build/build/ckeditor"
import { component as ckeditor } from "@ckeditor/ckeditor5-vue";

const editor = ref(CKEditor);
const editorData = ref("");
const editorConfig = ref({});
</script>

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

I'm getting below error:

Module not found: Error: Can't resolve 'ckeditor5-custom-build/build/ckeditor'

Solution

After Downloading the build zip file from CKEditor 5 Online Builder. Extract the zip and go to folder open the package.json file

{
  ...
  "dependencies": {
    "@ckeditor/ckeditor5-alignment": "41.2.1",
    "@ckeditor/ckeditor5-autoformat": "41.2.1",
    "@ckeditor/ckeditor5-basic-styles": "41.2.1",
    "@ckeditor/ckeditor5-block-quote": "41.2.1",
    "@ckeditor/ckeditor5-cloud-services": "41.2.1",
    "@ckeditor/ckeditor5-editor-classic": "41.2.1",
    "@ckeditor/ckeditor5-essentials": "41.2.1",
    "@ckeditor/ckeditor5-font": "41.2.1",
    "@ckeditor/ckeditor5-heading": "41.2.1",
    "@ckeditor/ckeditor5-image": "41.2.1",
    "@ckeditor/ckeditor5-indent": "41.2.1",
    "@ckeditor/ckeditor5-link": "41.2.1",
    "@ckeditor/ckeditor5-list": "41.2.1",
    "@ckeditor/ckeditor5-media-embed": "41.2.1",
    "@ckeditor/ckeditor5-paragraph": "41.2.1",
    "@ckeditor/ckeditor5-paste-from-office": "41.2.1",
    "@ckeditor/ckeditor5-table": "41.2.1",
    "@ckeditor/ckeditor5-typing": "41.2.1",
    "@ckeditor/ckeditor5-undo": "41.2.1",
    "@ckeditor/ckeditor5-upload": "41.2.1"
  },
  ...
}

Copy all dependencies from package.json file except devDependencies and paste it into your project package.json file and Run npm i command

Go to src subfolder in extracted folder and open ckeditor.ts file

/**
 * @license Copyright (c) 2014-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import type { EditorConfig } from '@ckeditor/ckeditor5-core';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
import { Heading } from '@ckeditor/ckeditor5-heading';
import {
    AutoImage,
    Image,
    ImageCaption,
    ImageInsert,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload
} from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import {
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar
} from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { Undo } from '@ckeditor/ckeditor5-undo';
import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload';

// You can read more about extending the build with additional plugins in the "Installing plugins" guide.
// See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.

class Editor extends ClassicEditor {
    public static override builtinPlugins = [
        Alignment,
        AutoImage,
        AutoLink,
        Autoformat,
        Base64UploadAdapter,
        BlockQuote,
        Bold,
        CloudServices,
        Essentials,
        FontBackgroundColor,
        FontColor,
        FontFamily,
        FontSize,
        Heading,
        Image,
        ImageCaption,
        ImageInsert,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Italic,
        Link,
        LinkImage,
        List,
        ListProperties,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        Strikethrough,
        Table,
        TableCaption,
        TableCellProperties,
        TableColumnResize,
        TableProperties,
        TableToolbar,
        TextTransformation,
        Underline,
        Undo
    ];

    public static override defaultConfig: EditorConfig = {
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'underline',
                'alignment',
                '|',
                'link',
                'strikethrough',
                'bulletedList',
                'numberedList',
                '|',
                'outdent',
                'indent',
                '|',
                'fontSize',
                'fontFamily',
                '|',
                'fontBackgroundColor',
                'fontColor',
                '|',
                'imageUpload',
                '|',
                'undo',
                'redo'
            ]
        },
        language: 'en',
        image: {
            toolbar: [
                'imageTextAlternative',
                'toggleImageCaption',
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                'linkImage'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells',
                'tableCellProperties',
                'tableProperties'
            ]
        }
    };
}

export default Editor;

Copy all the import statements from ckeditor.ts file

Create new Vue file called Editor.vue and Paste the Import Statements

Editor.vue

<script setup>
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import type { EditorConfig } from '@ckeditor/ckeditor5-core';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
import { Heading } from '@ckeditor/ckeditor5-heading';
import {
    AutoImage,
    Image,
    ImageCaption,
    ImageInsert,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload
} from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import {
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar
} from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { Undo } from '@ckeditor/ckeditor5-undo';
import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload';
<script>

Install the following packages

@ckeditor/ckeditor5-vue
@ckeditor/vite-plugin-ckeditor5
@ckeditor/ckeditor5-theme-lark

Setup @ckeditor/vite-plugin-ckeditor5 plugin in vite.config.js

import ckeditor5 from "@ckeditor/vite-plugin-ckeditor5"; 
import { createRequire } from 'node:module';
const require = createRequire( import.meta.url ); /** Resolve Error: require.resolve is not a function **/
{
...
    plugins: [
        vue(),
        ckeditor5({
            theme: require.resolve("@ckeditor/ckeditor5-theme-lark"),
        }),
    ],
...
},

Use @ckeditor/ckeditor5-vue official package

<script setup>
...
import { component as ckeditor } from "@ckeditor/ckeditor5-vue"; /** <-- Here like this **/

const editor = ref(ClassicEditor);
const editorData = defineModel();

const editorConfig = ref({
    plugins: []
})
<script>
<template>
    <ckeditor :editor="editor" :config="editorConfig" v-model="editorData"></ckeditor>
</template>

Open ckeditor.ts and Copy all the elements in builtinPlugins array

...
class Editor extends ClassicEditor {
    public static override builtinPlugins = [
        Alignment,
        AutoImage,
        AutoLink,
        Autoformat,
        Base64UploadAdapter,
        BlockQuote,
        Bold,
        CloudServices,
        Essentials,
        FontBackgroundColor,
        FontColor,
        FontFamily,
        FontSize,
        Heading,
        Image,
        ImageCaption,
        ImageInsert,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Italic,
        Link,
        LinkImage,
        List,
        ListProperties,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        Strikethrough,
        Table,
        TableCaption,
        TableCellProperties,
        TableColumnResize,
        TableProperties,
        TableToolbar,
        TextTransformation,
        Underline,
        Undo
    ];

...

Go back to Editor.vue file and Paste it into editorConfig variable plugins property

...
const editor = ref(ClassicEditor);
const editorData = defineModel();
const editorConfig = ref({
    plugins: [
        Alignment,
        AutoImage,
        AutoLink,
        Autoformat,
        Base64UploadAdapter,
        BlockQuote,
        Bold,
        CloudServices,
        Essentials,
        FontBackgroundColor,
        FontColor,
        FontFamily,
        FontSize,
        Heading,
        Image,
        ImageCaption,
        ImageInsert,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Italic,
        Link,
        LinkImage,
        List,
        ListProperties,
        MediaEmbed,
        Paragraph,
        Strikethrough,
        Table,
        TableCaption,
        TableCellProperties,
        TableColumnResize,
        TableProperties,
        TableToolbar,
        TextTransformation,
        Underline,
        Undo
    ],
});
...

Open ckeditor.ts and Also Copy the all properties with values from defaultConfig and Paste it into Editor.vue

<script setup>
import { ref } from 'vue';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
import { Heading } from '@ckeditor/ckeditor5-heading';
import {
    AutoImage,
    Image,
    ImageCaption,
    ImageInsert,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload
} from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import {
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar
} from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { Undo } from '@ckeditor/ckeditor5-undo';
import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload';

import { component as ckeditor } from "@ckeditor/ckeditor5-vue";

const editor = ref(ClassicEditor);
const editorData = defineModel();

const editorConfig = ref({
    plugins: [
        Alignment,
        AutoImage,
        AutoLink,
        Autoformat,
        Base64UploadAdapter,
        BlockQuote,
        Bold,
        CloudServices,
        Essentials,
        FontBackgroundColor,
        FontColor,
        FontFamily,
        FontSize,
        Heading,
        Image,
        ImageCaption,
        ImageInsert,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Italic,
        Link,
        LinkImage,
        List,
        ListProperties,
        MediaEmbed,
        Paragraph,
        Strikethrough,
        Table,
        TableCaption,
        TableCellProperties,
        TableColumnResize,
        TableProperties,
        TableToolbar,
        TextTransformation,
        Underline,
        Undo
    ],
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'underline',
            'alignment',
            '|',
            'link',
            'strikethrough',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'fontSize',
            'fontFamily',
            '|',
            'fontBackgroundColor',
            'fontColor',
            '|',
            'imageUpload',
            '|',
            'undo',
            'redo'
        ]
    },
    language: 'en',
    image: {
        toolbar: [
            'imageTextAlternative',
            'toggleImageCaption',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            'linkImage'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
            'tableCellProperties',
            'tableProperties'
        ]
    },
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
            { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
            { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
            { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
            { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
        ]
    }
});
</script>

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

Now import Editor Component any where in your project

<script setup>
import { ref } from "vue";
import Editor from '@/components/Editor';

const description = ref("");
<script>
<template>
    <Editor v-model="description"/>
<template>

Live Preview