在 Vue.js 上的 CKEditor 中集成 CKFinder答案

【问题标题】：Integration CKFinder in CKEditor on Vue.js在 Vue.js 上的 CKEditor 中集成 CKFinder
【发布时间】：2019-06-21 06:02:24
【问题描述】：

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

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

提前感谢您帮助我。

【问题讨论】：

标签： vue.js vuejs2 ckeditor vue-component ckeditor5

【解决方案1】：

你不必导入

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

因为它是您选择的already included in the build。您只需要configure it，错误就会消失。

【讨论】：

【解决方案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>

【讨论】：