CKEditor 5 Проблемы с загрузкой изображений - PullRequest
Новая
       32

CKEditor 5 Проблемы с загрузкой изображений

0 голосов
/ 20 ноября 2018

Я использую ckeditor5 в своем проекте.Я должен поддерживать загрузку изображений, поэтому я выполняю поиск и следую за этим stackoverflow article .

Я создал uploadAdapter, который: 

class UploadAdapter {

constructor( loader, url, t ) {
    this.loader = loader;
    this.url = url;
    this.t = t;
}

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

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

_initRequest() {
    const xhr = this.xhr = new XMLHttpRequest();

    xhr.open( 'POST', this.url, true );
    xhr.responseType = 'json';
}

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

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

        if ( !response || !response.uploaded ) {
            return reject( response && response.error && response.error.message ? response.error.message : genericError );
        }
        resolve( {
            default: response.url
        } );
    } );

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

_sendRequest() {
    const data = new FormData();
    data.append( 'upload', this.loader.file );
    this.xhr.send( data );
}
}

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
export default class GappUploadAdapter extends Plugin {
    static get requires() {
        return [ FileRepository ];
    }

    static get pluginName() {
        return 'GappUploadAdapter';
    }

    init() {
        const url = this.editor.config.get( 'gapp.uploadUrl' );

        if ( !url ) {
            return;
        }

        this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => new UploadAdapter( loader, url, this.editor.t );
    }
}

Теперь это объясняется.У меня 2 проблемы.

  1. После загрузки (моя загрузка на сервер работает нормально и возвращает действительный URL в формате {default: url}, почему содержимое моего изображения вставлено как data-uri, а не в url какдля простой демонстрации изображения здесь . Я хочу, чтобы мое изображение было похоже на URL.
  2. Я хотел бы прослушать что-то вроде успешной загрузки изображения (с идентификатором изображения, полученным из вызова сервера загрузки) навставить некоторое содержание на мою страницу. Как продолжить? enter image description here enter image description here

Спасибо за помощь.

PS:Я собираю ckeditor с командой 'npm run build' из git repo, клонированной из https://github.com/ckeditor/ckeditor5-build-classic

EDIT : Благодаря принятому ответу я увидел, что в возвращенных данных я ошибся.не возвращал ни одного URL-адреса в моем интерфейсе загрузчика, из-за чего изображение редактора оставалось в виде img-data. После того, как был возвращен действительный URL-адрес, он был автоматически проанализирован, и изображение моего редактора содержало действительный URL-адрес.

image descr

1 Ответ

0 голосов
/ 28 ноября 2018

Если data-uri все еще используется после успешной загрузки, я предполагаю, что ответ сервера не был обработан правильно, и полученный URL не может быть получен.Я протестировал предоставленный вами код адаптера, и он отлично работает (с CKFinder на стороне сервера).Я бы проверил, как выглядит ответ сервера загрузки и можно ли его правильно проанализировать.

При использовании CKFinder вы увидите:

enter image description here

и проанализированный ответ JSON:

enter image description here

Вы можете проверить, правильно ли обрабатывается ответ в вашем адаптере в: 

xhr.addEventListener( 'load', () => {
    const response = xhr.response;
    ...
}

Прослушивание успешной загрузки изображения может быть непростым делом, поскольку нет события, непосредственно связанного с ним.В зависимости от того, что именно вы пытаетесь достичь, вы можете попытаться расширить свой пользовательский загрузчик, чтобы при получении успешного ответа (и при вызове resolve()) вы могли выполнить некоторый код.Однако в этом состоянии элемент изображения все еще не обновляется (в модели, представлении и DOM) с новым URL-адресом, а у UploadAdapter отсутствует прямой доступ к экземпляру editor, поэтому может быть сложно выполнить что-либо сложное.

Лучшим способом может быть прослушивание изменений модели, аналогично тому, как это делается в плагине ImageUploadEditing ( см. Код здесь ), проверяющем изменение атрибута изображения uploadStatus: 

editor.model.document.on( 'change', () => {
  const changes = doc.differ.getChanges();

  for ( const entry of changes ) {
    const uploaded = entry.type === 'attribute' && entry.attributeNewValue === 'complete' && entry.attributeOldValue === 'uploading';
    
    console.log( entry );
  }
} );

Если оно изменяется с uploading на complete, это означает, что изображения были успешно загружены:

enter image description here

Вы также можете взглянуть на другой ответ, который показывает, как подключиться к FileRepository API для отслеживания всего процесса загрузки - https://github.com/ckeditor/ckeditor5-image/issues/243#issuecomment-442393578.

...