Пользовательский адаптер загрузки изображений ckeditor 5 - PullRequest
0 голосов
/ 21 марта 2019

Я пытаюсь заставить его работать (пользовательский адаптер загрузки изображений) по документам.Но у меня есть ошибка.

Я оставил только простой код, чтобы убедиться, что это не среда, но у меня та же ошибка.

Извините, я не знаю почему, но яне удалось поместить код в этот редактор правильно, поэтому я просто поместил его во фрагмент.

После выбора фотографии у меня появляется ошибка.

ckeditorerror.js: 46 Uncaught CKEditorError: модель-выбор-набор-диапазоны-не-диапазон: диапазон выбора, установленный для объектаэто не экземпляр model.Range.

Интересно, что если я добавлю какой-то текст раньше, у меня будет другая ошибка.

ckeditorerror.js: 46 Uncaught 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, модули узлов и т. Д., Но это не помогло.npm -v 6.9.0 узел -v v9.11.2

...