web-dev-qa-db-fra.com

Comment activer la prise en charge du téléchargement d'images dans CKEditor 5?

J'utiliserai le ckeditor v5 dans mon projet. J'essaie d'utiliser le plugin image, mais je ne trouve pas assez d'informations à ce sujet.

Si vous voyez le Demoe ici , vous téléchargez facilement des images avec Drag & Drop. Mais quand je vais l'essayer avec le ballon de téléchargement Zip, rien ne se passe lorsque j'essaie de glisser-déposer une image. Il n'y a pas non plus d'erreur.

Existe-t-il un moyen d'utiliser ce support d'image dans la variante téléchargeable?

javascriptckeditorckeditor5
9
Lukas Gund

Oui, le téléchargement d'images est inclus dans toutes les versions disponibles. Pour que cela fonctionne, cependant, vous devez configurer l'un des adaptateurs de téléchargement existants ou écrire le vôtre. En bref, l'adaptateur de téléchargement est une classe simple dont le rôle est d'envoyer un fichier à un serveur (de la manière qu'il souhaite) et de résoudre la promesse retournée une fois qu'elle est terminée.

Vous pouvez en lire plus dans le guide officiel Téléchargement d'image ou voir le bref résumé des options disponibles ci-dessous.

Adaptateurs de téléchargement officiels

Il existe deux adaptateurs intégrés:

  • Pour CKFinder qui nécessite que vous installiez les connecteurs CKFinder sur votre serveur.

    Une fois le connecteur installé sur votre serveur, vous pouvez configurer CKEditor pour télécharger des fichiers vers ce connecteur en définissant config.ckfinder.uploadUrl option:

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

    Vous pouvez également activer l'intégration complète avec le gestionnaire de fichiers côté client de CKFinder. Consultez le démos d'intégration CKFinder et lisez plus dans le guide intégration CKFinder .

  • Pour le service Easy Image qui fait partie de CKEditor Cloud Services .

    Vous devez configurer un compte Cloud Services et une fois que vous créer un point de terminaison de jeton configurer l'éditeur pour l'utiliser:

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

Avertissement: Ce sont des services propriétaires.

Adaptateur de téléchargement personnalisé

Vous pouvez également écrire votre propre adaptateur de téléchargement qui enverra les fichiers comme vous le souhaitez à votre serveur (ou où vous voulez les envoyer).

Voir Adaptateur de téléchargement d'image personnalisé guide pour savoir comment l'implémenter.

Un exemple (c'est-à-dire sans sécurité intégrée) d'adaptateur de téléchargement peut ressembler à ceci:

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 );
    }
}

Qui peut ensuite être activé comme ceci:

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 );
    } );

REMARQUE: Ce qui précède n'est qu'un exemple d'adaptateur de téléchargement. En tant que tel, il n'a pas de mécanismes de sécurité intégrés (tels que la protection CSRF).

17
Reinmar

Je cherchais des informations sur la façon d'utiliser ce contrôle et j'ai trouvé la documentation officielle plutôt minimale. Je l'ai cependant fait fonctionner après beaucoup d'essais et d'erreurs, alors j'ai pensé que je partagerais.

En fin de compte, j'ai utilisé l'adaptateur de téléchargement simple CKEditor 5 avec Angular 8 et cela fonctionne très bien. Vous devez cependant créer une version personnalisée de ckeditor sur laquelle l'adaptateur de téléchargement est installé. C'est assez facile Je suppose que vous avez déjà les fichiers ckeditor Angular.

Tout d'abord, créez un nouveau répertoire de projet angular et appelez-le "cKEditor-Custom-Build" ou quelque chose comme ça. N'exécutez pas ng new (Angular CLI), mais utilisez plutôt npm pour obtenir la construction de base de l'éditeur que vous souhaitez afficher. Pour cet exemple, j'utilise l'éditeur classique.

https://github.com/ckeditor/ckeditor5-build-classic

Accédez à github et clonez ou téléchargez le projet dans votre nouveau répertoire de construction brillant.

si vous utilisez du code VS, ouvrez le répertoire et ouvrez une boîte à bornes et obtenez les dépendances:

npm i

À droite, vous avez maintenant la version de base et vous devez installer un adaptateur de téléchargement. ckEditor en a un. installez ce package pour obtenir l'adaptateur de téléchargement simple:

npm install --save @ckeditor/ckeditor5-upload

..une fois cela fait, ouvrez le fichier ckeditor.js dans le projet. C'est dans le répertoire "src". Si vous avez joué avec ckEditor, son contenu devrait vous sembler familier.

Importez le nouveau fichier js dans le fichier ckeditor.js. Il y aura un tas d'importations dans ce fichier et déposez-le tout en bas.

import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

... Ensuite, ajoutez l'importation à votre tableau de plugins. Comme j'utilise l'éditeur classique, ma section s'appelle "ClassicEditor.builtinPlugins", ajoutez-la à côté de TableToolbar. C'est tout configuré. Aucune barre d'outils ou configuration supplémentaire n'est nécessaire à cette fin.

Construisez votre ckeditor-custom-build.

npm run build

La magie de Angular fera l'affaire et un répertoire "build" est créé dans votre projet. Que ce soit pour la build personnalisée.

Maintenant, ouvrez votre angular et créez un répertoire pour votre nouvelle version à vivre. J'ai en fait mis le mien dans le sous-répertoire des actifs, mais il peut être n'importe où vous pouvez le référencer.

Créez un répertoire dans "src/assets" appelé quelque chose comme "ngClassicEditor", peu importe comment vous l'appelez, et copiez-y le fichier de construction (que vous venez de créer). Ensuite, dans le composant que vous souhaitez utiliser l'éditeur, ajoutez une instruction d'importation avec le chemin d'accès à la nouvelle version.

import * as Editor from '@app/../src/assets/ngClassicEditor/build/ckeditor.js';

presque fini...

Le dernier bit consiste à configurer l'adaptateur de téléchargement avec le point de terminaison API que l'adaptateur doit utiliser pour télécharger des images. Créez une configuration dans votre classe de composants.

  public editorConfig = {
simpleUpload: {
  // The URL that the images are uploaded to.
  uploadUrl: environment.postSaveRteImage,

  // Headers sent along with the XMLHttpRequest to the upload server.
  headers: {
    'X-CSRF-TOKEN': 'CSFR-Token',
    Authorization: 'Bearer <JSON Web Token>'
  }
}

};

J'utilise en fait transformation d'environnement ici car l'URI passe de dev à production, mais vous pouvez coder en dur une URL directe si vous le souhaitez.

La dernière partie consiste à configurer votre éditeur dans le modèle pour utiliser vos nouvelles valeurs de configuration. Ouvrez votre component.html et modifiez votre balise d'éditeur ckeditor.

     <ckeditor [editor]="Editor" id="editor"  [config]="editorConfig">
      </ckeditor>

C'est ça. Vous avez terminé. test, test test.

Mon API est une API .Net et je suis heureux de partager si vous avez besoin d'un exemple de code. J'espère vraiment que cela vous aidera.

1
Darren Street