自定义图片上传适配器ckeditor 5

Question

我正在尝试通过docs使它正常工作（自定义图像上传适配器）。但是我有一个错误。

我只留下了简单的代码以确保它不是环境，但是我有相同的错误。

对不起，我不知道为什么，但是我无法正确地将代码放入此编辑器中，因此我只将其放入代码段中。

选择照片后出现错误。

  

ckeditorerror.js：46未捕获的CKEditorError：模型选择范围不设置范围：选择范围设置为不是模型实例的对象。范围。

有趣的是，如果我在遇到其他错误之前添加一些文本。

  

ckeditorerror.js：46未捕获的CKEditorError：model-createPositionAt-offset-required：当第一个参数是模型项时，Model＃createPositionAt（）需要偏移量。

import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import List from '@ckeditor/ckeditor5-list/src/list';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import leftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
import rightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
import Link from '@ckeditor/ckeditor5-link/src/link';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';


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

    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this._initRequest();
                this._initListeners(resolve, reject, file);
                this._sendRequest(file);
            }));
    }

    abort() {
        if (this.xhr) {
            this.xhr.abort();
        }
    }

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://****/ajax/upload-ckeditor-image', true);
        xhr.responseType = 'json';
    }

    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${file.name}.`;

        xhr.addEventListener('error', () => reject(genericErrorText));
        xhr.addEventListener('abort', () => reject());
        xhr.addEventListener('load', () => {
            const response = xhr.response;

            if (!response || response.error) {
                return reject(response && response.error ? response.error.message : genericErrorText);
            }

            resolve({
                default: response.url
            });
        });

        if (xhr.upload) {
            xhr.upload.addEventListener('progress', evt => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }

    _sendRequest(file) {
        const data = new FormData();

        data.append('upload', file);
        this.xhr.send(data);
    }
}


function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader);
    };
}


ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [
            Table,
            TableToolbar,
            Essentials,
            Paragraph,
            Bold,
            Italic,
            Heading,
            Image,
            ImageToolbar,
            ImageCaption,
            ImageStyle,
            ImageUpload,
            UploadAdapter,
            Link,
            Highlight,
            List,
            BlockQuote,
            FontSize
        ],
        extraPlugins: [MyCustomUploadAdapterPlugin],
        toolbar: ['bold', 'italic', 'imageUpload', 'fontSize', 'heading', 'link', 'highlight', 'bulletedList',
            'numberedList', 'blockQuote', 'undo', 'redo', 'insertTable']

    })
    .catch(error => {
        console.log(error);
    });

<textarea name="editor" id="editor" cols="30" rows="10"></textarea>

我不知道该怎么做，因为我只是从文档中获取了基本代码，并且没有添加任何特别的东西。 我试图更新npm，nodemodules等，但是没有帮助。 npm -v 6.9.0 节点-v v9.11.2