javascript - ¿Cómo habilitar el soporte de carga de imágenes en CKEditor 5?

ckeditor5

Question

Usaré el ckeditor v5 en mi proyecto. Estoy tratando de usar el complemento de imagen, pero no encuentro suficiente información al respecto.

Si ve la demostración here , puede cargar imágenes fácilmente con Arrastrar y soltar. Pero cuando lo intente con la descarga del globo de descarga no pasa nada cuando intento arrastrar y soltar una imagen. Tampoco hay error.

¿Hay alguna manera de utilizar este soporte de imagen en la variante descargable?

Answer 1

Sí, la carga de imágenes está incluida en todas las compilaciones disponibles. Sin embargo, para que funcione, debe configurar uno de los adaptadores de carga existentes o escribir uno propio. En resumen, el adaptador de carga es una clase simple cuya función es enviar un archivo a un servidor (de la forma que desee) y resolver la promesa devuelta una vez que se haya hecho.

Puede leer más en la guía oficial de carga de imágenes o ver el breve resumen de las opciones disponibles a continuación.

Adaptadores de carga oficiales

Hay dos adaptadores incorporados:

• Para CKFinder que requieren que instale los conectores CKFinder en su servidor.

  Una vez que tenga el conector instalado en su servidor, puede configurar CKEditor para cargar archivos a ese conector configurando la opción config.ckfinder.uploadUrl :

  ClassicEditor
      .create( editorElement, {
          ckfinder: {
              uploadUrl: ''/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json''
          }
      } )
      .then( ... )
      .catch( ... );

  También puede habilitar la integración total con el administrador de archivos del lado del cliente de CKFinder. Consulte las demostraciones de integración de CKFinder y lea más en la guía de integración de CKFinder .

• Para el servicio Easy Image que forma parte de CKEditor Cloud Services .

  Debe configurar una cuenta de Cloud Services y una vez que haya creado un punto final de token, configure el editor para usarlo:

  ClassicEditor
      .create( editorElement, {
          cloudServices: {
              tokenUrl: ''https://example.com/cs-token-endpoint'',
              uploadUrl: ''https://your-organization-id.cke-cs.com/easyimage/upload/''
          }
      } )
      .then( ... )
      .catch( ... );

Descargo de responsabilidad: estos son servicios patentados.

Adaptador de carga personalizado

También puede escribir su propio adaptador de carga que enviará los archivos de la manera que desee a su servidor (o donde quiera que los envíe).

Consulte la guía del adaptador de carga de imágenes personalizadas para aprender cómo implementarla.

Un ejemplo de adaptador de carga (es decir, sin seguridad incorporada) puede verse así:

class MyUploadAdapter {
    constructor( loader ) {
        // CKEditor 5''s FileLoader instance.
        this.loader = loader;

        // URL where to send files.
        this.url = ''https://example.com/image/upload/path'';
    }

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

    // Aborts the upload process.
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // Example implementation using XMLHttpRequest.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

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

    // Initializes XMLHttpRequest listeners.
    _initListeners( resolve, reject ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = ''Couldn/'t upload file:'' + ` ${ loader.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 );
            }

            // If the upload is successful, resolve the upload promise with an object containing
            // at least the "default" URL, pointing to the image on the server.
            resolve( {
                default: response.url
            } );
        } );

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

    // Prepares the data and sends the request.
    _sendRequest() {
        const data = new FormData();

        data.append( ''upload'', this.loader.file );

        this.xhr.send( data );
    }
}

Que luego se puede habilitar así:

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

ClassicEditor
    .create( document.querySelector( ''#editor'' ), {
        extraPlugins: [ MyCustomUploadAdapterPlugin ],

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

NOTA: Lo anterior es solo un ejemplo de adaptador de carga. Como tal, no tiene mecanismos de seguridad incorporados (como la protección CSRF).