igorxut / vue-ckeditor5

Component CKEditor 5 for Vue 2.
MIT License
53 stars 22 forks source link

how to config imageupload? #6

Closed SamHz closed 6 years ago

SamHz commented 6 years ago

Hi @igorxut, i want to use you component,how config imageUpload to my service?

SamHz commented 6 years ago

my project upload ok. my code:

class UploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }

    upload() {
        return new Promise((resolve, reject) => {
            const data = new FormData();
            data.append('file', this.loader.file);
            data.append('allowSize', 10);// M
            $.ajax({
                url: 'http://my-domains/path/to/uploadfile',
                type: 'POST',
                data: data,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.file) {
                        resolve({
                            default: 'http://my-domains/uploads/' + data.file
                        });
                    } else {
                        reject(data.msg);
                    }

                }
            });

        });
    }

    abort() {
    }
}

export default {
    name: 'vue-ckeditor',

    render: createElement => createElement('div'),

    props: {
        config: {
            default: () => {
                return {
                    language: 'en'
                }
            },
            required: false,
            type: Object
        },

        editors: {
            default: () => {
                return {}
            },
            required: false,
            type: Object
        },

        readonly: {
            default: () => false,
            required: false,
            type: Boolean
        },

        type: {
            required: true,
            type: String
        },

        value: {
            default: () => '',
            required: false,
            type: String
        }
    },

    data() {
        return {
            instance: null
        }
    },

    watch: {
        value: function (newValue) {
            const instance = this.instance

            if (
                instance != null &&
                newValue !== instance.getData()
            ) {
                instance.setData(newValue)
            }
        }
    },

    methods: {
        create: function () {
            if (this.instance == null) {
                const type = this.type
                const editors = this.$VueCkeditorEditors || this.editors

                if (!Object.keys(editors).length) {
                    throw new Error(`There are no CKEditor 5 implementations.`)
                }

                const editor = editors[type]

                if (editor == null) {
                    throw new Error(`Wrong key '${type}'. Allowed keys: ${Object.keys(editors)}`)
                }

                editor
                    .create(this.$el, this.config)
                    .then(editor => {
                        this.instance = editor
                        editor.plugins.get('FileRepository').createUploadAdapter = function (loader) {
                            return new UploadAdapter(loader)
                        }
                        const instance = this.instance
                        instance.isReadOnly = this.readonly
                        instance.model.document.on('change', this.update)
                        instance.setData(this.value)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        },
        destroy: function () {
            const instance = this.instance

            if (instance != null) {
                instance.destroy()
            }
        },
        update: function () {
            const value = this.instance.getData()

            if (this.value !== value) {
                this.$emit('input', value)
            }
        }
    },

    mounted() {
        this.create()
    },

    beforeDestroy() {
        this.destroy()
    }
}

please up load the project let it support add Adapter

igorxut commented 6 years ago

Thanks. I'll watch it later. I don't have time now.

igorxut commented 6 years ago

Added connection to UploadAdapter. See example.