Интеграция CKFinder в CKEditor на Vue.js

Я новичок в vue.js. Интегрирован CKEditor успешно, но возникли проблемы с интеграцией в него CKFinder. Я пытаюсь импортировать CKFinder в компонент CKEditor, но получаю сообщение об ошибке.

Компонент CKEditor-Vue:

<template>
    <ckeditor :editor="editor" :value="defaultValue"
              @input="editorInput" :disabled="disabled" :config="editorConfig"></ckeditor>
</template>

<script>
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'

    export default {
        name: "Editor",
        props: {
            defaultValue: String,
            disabled: Boolean
        },
        data() {
            return {
                editor: DecoupledEditor,
                editorConfig: {
                    plugins: [
                        CKFinder
                    ]
                }
            }
        },
        methods: {
            editorInput(e) {
                this.$emit('getEditorData', e);
            }
        }
    }
</script>

<style scoped>
</style>

Когда я пытаюсь импортировать CKFinder, он показывает ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.. Скриншот: Ошибка импорта CKFinder

Я делаю что-то не так? Есть ли у вас какое-либо руководство по интеграции или исправления для моего компонента?

Заранее спасибо за помощь.


vue.js vuejs2 vue-component ckeditor ckeditor5
person Harun R Rayhan    schedule 21.06.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вам не нужно импортировать

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'

потому что он уже включен в сборку на ваш выбор. Вам нужно только настроить его и ошибка должна исчезнуть.

person oleq    schedule 04.07.2019

arrow_upward
1
arrow_downward

Чтобы было понятно, что означает oleq, просто сделайте конфиг под editorConfig вот так. Вам не нужно импортировать его.

<script>
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'

    export default {
        name: "Editor",
        props: {
            defaultValue: String,
            disabled: Boolean
        },
        data() {
            return {
                editor: DecoupledEditor,
                editorConfig: {
                    plugins: [
                        ckfinder: {
                             uploadUrl:
                        '/ckfinder/connector?command=QuickUpload&type=Files&responseType=json',
                             filebrowserBrowseUrl: '/ckfinder/browser',
                             filebrowserImageBrowseUrl: '/ckfinder/browser?type=Images',
                             filebrowserUploadUrl:'/ckfinder/connector?command=QuickUpload&type=Files',
                             filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images'
                        }
                    ]
                }
            }
        },
        methods: {
            editorInput(e) {
                this.$emit('getEditorData', e);
            }
        }
    }
</script>
person ßiansor Å. Ålmerol    schedule 12.08.2019