Vue.js 在 CKEditor 中集成 CKFinder

Question

我是 vue.js 的新手。 CKEditor集成成功，CKFinder集成失败。我正在尝试在 CKEditor 组件中导入 CKFinder，但出现错误。

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.。截图：

我做错了什么吗？您对我的组件有任何集成指南或更正吗？

在此先感谢您对我的帮助。

Answer 1

您不必导入

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

因为它是 already included in the build of your choice. You only need to configure it，错误应该会消失。

Answer 2

为了弄清楚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>

Vue.js 在 CKEditor 中集成 CKFinder

Integration CKFinder in CKEditor on Vue.js

vue.js

vuejs2

ckeditor

vue-component

ckeditor5