vue-ckeditor

2019独角兽企业重金招聘Python工程师标准>>>

<script src="https://cdn.ckeditor.com/4.11.1/full-all/ckeditor.js"></script>

editor.vue 

<template>
    <textarea :style="{width: width || '100%', height: height || '300px'}" v-model="value"></textarea>
</template>

<script>
    export default {
        props: ['width', 'height', 'value'],
        data() {
            return {
                flag: true,
            }
        },
        mounted() {
            var editor = CKEDITOR.replace(this.$el, {
                contentsCss: [
                    'http://cdn.ckeditor.com/4.11.1/full-all/contents.css',
                ],
                uploadUrl: this.$config.uploadUrl,
                filebrowserUploadUrl: this.$config.uploadUrl,
                filebrowserImageUploadUrl: this.$config.uploadUrl,
            });

            editor.on('fileUploadRequest', (evt) => {
                var query = this.$uploadData(),
                    fileLoader = evt.data.fileLoader,
                    xhr = fileLoader.xhr,
                    formData = new FormData();

                formData.append('file', fileLoader.file, fileLoader.fileName);
                for (var name in query) {
                    formData.set(name, query[name]);
                }
                xhr.send(formData);

                evt.stop();
            });

            editor.on('fileUploadResponse', (evt) => {
                evt.stop();

                try {
                    var res = JSON.parse(evt.data.fileLoader.xhr.responseText);
                    evt.data.url = res.data.url || '';
                } catch (e) {
                    evt.data.message = e;
                    evt.cancel();
                }
            });

            editor.on('change', (evt) => {
                var content = evt.editor.getData();
                this.$emit('input', content)
            });
        }
    }
</script>

test.vue

<template>
    <div>
        <editor value="123" @input="onContent"></editor>
    </div>
</template>

<script>
    import editor from '@/components/editor'
    export default {
        components: {
            editor,
        },
        data() {
            return {
               
            }
        },
        methods: {
            onContent(content) {
                console.log(content)
            }
        },
    }
</script>

 

转载于:https://my.oschina.net/qiongtaoli/blog/2995311