vue CKEditor5 导入 word

你可以使用CKEditor5的官方插件`@ckeditor/ckeditor5-import-export`来导入Word文档。首先，你需要安装该插件和其依赖项：

npm install --save @ckeditor/ckeditor5-import-export @ckeditor/ckeditor5-utils @ckeditor/ckeditor5-upload

然后在你的Vue组件中导入CKEditor5和插件：

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import ExportWordPlugin from '@ckeditor/ckeditor5-export-word/src/exportword';
import ImportWordPlugin from '@ckeditor/ckeditor5-import-export/src/importword';

Vue.component('ckeditor', {
    props: ['editorConfig', 'value'],
    template: '<div><textarea ref="textarea" :value="value" @input="update"></textarea></div>',
    data() {
        return {
            editor: null
        }
    },
    mounted() {
        ClassicEditor.create(this.$refs.textarea, {
            plugins: [EssentialsPlugin, UploadAdapterPlugin, AutoformatPlugin, BoldPlugin, ItalicPlugin, ParagraphPlugin, ExportWordPlugin, ImportWordPlugin],
            toolbar: ['bold', 'italic', 'exportWord', 'importWord'],
            ...this.editorConfig
        })
        .then(editor => {
            this.editor = editor;
            this.editor.model.document.on('change:data', () => {
                this.$emit('input', editor.getData());
            });
        })
        .catch(error => {
            console.error(error);
        });
    },
    methods: {
        update(event) {
            this.editor.setData(event.target.value);
        }
    },
    beforeDestroy() {
        this.editor.destroy().then(() => {
            this.editor = null;
        });
    }
});

然后就可以在你的Vue组件中使用CKEditor5，并导入Word文档了：

<ckeditor v-model="content" :editorConfig="{importWord: {converterOptions: {indentation: 4}}}" />

在上面的例子中，我们使用了`importWord`插件来导入Word文档，并使用了`editorConfig`属性来传递选项给插件。在`importWord`插件的选项中，我们指定了缩进为4个空格。