1

Acabo de implementar CDKEditor5 en mi proyecto de angular, he visto que tiene una opción que es para agregar imagenes, pero selecciono una imagen de mi equipo y no aparece en el editor, saben a que se debe?

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Este es mi código:

  public editorConfig = {
    fontFamily: {
      options: [
        'default',
        'Ubuntu, Arial, sans-serif',
        'Ubuntu Mono, Courier New, Courier, monospace'
      ]
    },
    language: 'es',
    placeholder: 'Escribe la entrada del blog aquí!',
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', '|','undo', 'redo' ],
  };

Según he podido leer por internet tengo que instalar una instalación personalizada no una ya creada... pero no se como hacerlo

1

1 respuesta 1

4
+50

La documentacion recomienda crear un repositorio personalizado de subida de imagenes para tu implementacion del CDKEditor. A continuacion voy a agregar la implementacion basado en la publicacion en el sitio oficial.

Descripcion

Upload adapter - AdaptadorDeSubida
Codigo (clase ) que maneja el proceso de subida de un archivo desde el momento que usuario hace la solicitud. (ej. cuando un archivo soltado en el contenido del editor) hasta el momento que el servidor manda la respuesta de proceso completado

UploadAdapter interface Es una interface que define las funciones minimas para definir el API que se requiere para implementar el adaptador.

File repository plugin
Es el punto central de la subida de archivos en CKEditor 5. Conecta los adaptador con CKEditor y los usa:

Los adaptadores de subida son inicializados en el editor usando el metod de una factoria Repository.createUploadAdapter().

Usa el API FileRepository habilitar las instancias de los adaptadores, dispara la subida de imagenes usando (UploadAdapter.upload()) utiliza la data que viene en la promesa de adaptador para actualizar la imagen en el contenido del editor.

Se encuentra en : @ckeditor/ckeditor5-upload/src/filerepository

Usted puede usar este codigo como ejemplo para crear su implementacion personalizada:

class AdaptadorDeSubida {
    constructor( loader) {           
        // la instancia del cargador del archivo para ser usado en la subida
        this.loader= loader;
    }

    // Comienza el proceso de subida
    upload() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                this._initRequest();
                this._initListeners( resolve, reject, file );
                this._sendRequest( file );
            } ) );
    }

    // Cancela el proceso de subida de la imagen.
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // Inicializa el objeto para XMLHttpRequest usando la URL pasada en el constructor.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        // La solicitud de subida puede ser diferente. Esto depende de usted y de la 
        // integracion de su editor para seleccionar el mejor modo de comunicacion. 
        // Este ejemplo provee
        // un POST request con JSON como estructura pero su configuracion puede ser
        // diferente.
        xhr.open( 'POST', 'http://example.com/image/upload/path', true );
        xhr.responseType = 'json';
    }

    // Inicializacion de XMLHttpRequest listeners.
    _initListeners( resolve, reject, file ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `El archivo no pudo ser subido: ${ file.name }.`;

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

            // Este ejemplo asume que el objeto de respuesta respuesta XHR server va a regresar con 
            // un"error" el cual es su propio "mensaje" que se puede pasar como parametro a la funcion reject()
            // en la la promesa generada con el proceso de subida(upload).
            //
            // Su integracion debe manejar los errores de manera independiente asi garantiza 
            // que sea realizado de la manera correcta. La funcion reject() debe ser llamada cuando el upload falla
            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }

            // Si la subida es satisfactoria de obtener un objeto de respuesta 
            // este debe contener las URL por defecto de la imagen, apuntando a la localizacion en el servidor.
            // Esta URL es la que va a ser utilizada para mostrar la imagen el el Editor
            resolve( {
                default: response.url
            } );
        } );



     // Cuando el proceso de subida es permitido. El archivo loader va a contener 
 el #uploadTotal(numero de archivos subidos) y #uploaded(fue subida?)
            // propiedades usadas para por ejemplo mostrar el progreso de la subida de los archivos en el editor

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

    // Prepara la data y envia la solicitud de subida.
    _sendRequest( file ) {
        // Prepare the form data.
        const data = new FormData();

        data.append( 'upload', file );

        // Importante: Este es el lugar para implementar las medidas de seguridad
        // como por ejemplo la proteccion CSRF. Por ejemplo usted puede crear un header
        // XMLHttpRequest.setRequestHeader() para agregar al header de su solicitud
        // el token CSRF generado en otro momento en su aplicacion.

        // Envia la solicitud.
        this.xhr.send( data );
    }
}

// ...

function EspanolUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        // Configura la URL del script de subida en el back end!
        return new AdaptadorDeSubida ( loader );
    };
}

// ...

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

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

Siguiendo este ejemplo , y adaptando los parametros con su aplicacion, usted va a experimentar un resultado satisfactorio. En caso de tener algun inconveniente por favor puede contactarme.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.