Currently, I am utilizing Ckeditor5 for Vue in Laravel. In accordance with the provided documentation, I have gone ahead and installed the necessary modules using the command
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classicimport CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );
const app = new Vue({
el: '#app',
});
To continue, I imported ClassicEdditor into a Vue component as shown below:
<template>
// A lot of code here
<div class="editor">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import Swal from 'sweetalert2';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily'; // <----- Here is the error
export default {
props: ['groups'],
mounted(){
},
data: function(){
return {
// My data
editor: ClassicEditor,
editorData: '',
editorConfig: {
// The configuration of the editor.
toolbar: {
items: [
'FontFamily',
'|',
'bold',
'italic',
'underline',
'subscript',
'superscript',
'|',
'List',
'Code',
'EasyImage',
'ImageUpload',
'|',
'link',
'undo',
'redo'
]
}
}
}
},
methods: {
// My methods here
}
</script>
Upon implementation, I encountered a warning in the console:
toolbarview-item-unavailable: The requested toolbar item is unavailable
{name: "FontFamily"}
The Error Codes page specified that:
There was a problem processing the configuration of the toolbar. The item with the given name does not exist so it was omitted when rendering the toolbar.
In an attempt to resolve this issue, I decided to install the plugin via npm and import it into the Vue component. However, after executing:
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
An error was thrown by Ckeditor:
Uncaught CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated
Even after reinstalling Ckeditor, the same issue persisted.