[Vuejs]-Integration CKFinder in CKEditor on Vue.js

by

3👍

✅

You don’t have to import

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

because it is already included in the build of your choice. You only need to configure it and the error should disappear.

👤oleq

1👍

To make it clear like what oleq mean, just make a config under the editorConfig like this. You don’t need to import it.

<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>
👤ßiansor Å. Ålmerol

Leave a comment