I
I
Ismail942020-12-15 14:32:07
Vue.js
Ismail94, 2020-12-15 14:32:07

How to integrate CKeditor5 vue and CKFinder laravel?

Good evening
1) I installed CKEditor vue, connected it, everything worked, the editor appeared on the page.

<template>
    <ckeditor :editor="editor" :config="editorConfig" v-model="content">
        {{form.content}}
    </ckeditor>

</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default {
    data(){
        return{
            content: '',
            editor: ClassicEditor,
            editorConfig: {
                // The configuration of the editor.
            }

        }
    },
}
</script>


Now you need to make sure that the photos are uploaded.
To do this, I downloaded CKFinder laravel
And did the integration by calling the command
npm install --save @ckeditor/ckeditor5-ckfinder

Add plugin
<template>
    <ckeditor :editor="editor" :config="editorConfig" v-model="content">
        {{form.content}}
    </ckeditor>

</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';

export default {
    data(){
        return{
            content: '',
            editor: ClassicEditor,
            editorConfig: {
                // The configuration of the editor.
                plugins: ['CKFinder']
            }

        }
    },
}
</script>

There is an error in the console
app.js:48004 CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
    at Module.<anonymous> (http://watch-company.kz/18.js:26032:8)
    at Module../node_modules/@ckeditor/ckeditor5-utils/src/version.js (http://watch-company.kz/18.js:26040:30)
    at __webpack_require__ (http://watch-company.kz/js/app.js:64:30)
    at Module../node_modules/@ckeditor/ckeditor5-utils/src/emittermixin.js (http://watch-company.kz/18.js:23054:66)
    at __webpack_require__ (http://watch-company.kz/js/app.js:64:30)
    at Module../node_modules/@ckeditor/ckeditor5-utils/src/observablemixin.js (http://watch-company.kz/18.js:24743:71)
    at __webpack_require__ (http://watch-company.kz/js/app.js:64:30)
    at Module../node_modules/@ckeditor/ckeditor5-core/src/plugin.js (http://watch-company.kz/18.js:2146:103)
    at __webpack_require__ (http://watch-company.kz/js/app.js:64:30)
    at Module../node_modules/@ckeditor/ckeditor5-ckfinder/src/ckfinder.js (http://watch-company.kz/18.js:346:93)

How to do it right, I've been fighting for 3 days now, any information will be useful.
The main thing I need is to upload photos.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question