Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Kaan33's avatar

Vue3 Ckeditor5-vue plugins install

I am using ckeditor with vue js, when I add plugins, I get the following error, where am I going wrong?

I couldn't figure out the cause of the error. not included in any of the examples.

by the way laravel version 8, vue version 3 ckeditor version 5

Uncaught CKEditorError: ckeditor-duplicated-modules

app.js

import CKEditor from '@ckeditor/ckeditor5-vue';
.use(CKEditor)
<template>
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="px-4 py-6 sm:px-0">
            <ckeditor
                tag-name="textarea"
                ref="cktext"
                :editor="editor"
                v-model="content"
                :config="editorConfig"
            ></ckeditor>
        </div>
    </div>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import '@ckeditor/ckeditor5-build-classic/build/translations/tr';
import Font from '@ckeditor/ckeditor5-font/src/font';
export default {
    name: 'app',
    data() {
        return {
            content: "",
            editor: ClassicEditor,
            editorConfig: {
                plugins:[Font],
                toolbar: ['imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo', '|', 'fontsize'],
                alignment: {
                    options: ['left', 'center', 'right']
                },
                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'}
                    ]
                },
                shouldNotGroupWhenFull: true,
                language: 'tr',
            }
        };
    }
};
</script>

0 likes
2 replies
codebullet's avatar

I think Font is included here import ClassicEditor from "@ckeditor/ckeditor5-build-classic" importing import Font from '@ckeditor/ckeditor5-font/src/font'; that can be the reason for duplicate module error try without import Font from '@ckeditor/ckeditor5-font/src/font';

bastiaanrudolf's avatar

I might be a bit late, but your problem is with import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

As the documentation states: you must never add plugins to existing builds.

Instead of importing the build, you should import a so-called editor implementation. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; and extend it with all the plugins you like such as Fonts. An example is in the documentation I linked.

Just a quick note: it is still impossible to do this if you use Vite.js, like me. See this thread. So it seems we are stuck with the prebuilt editors for now.

Please or to participate in this conversation.