web-dev-qa-db-fra.com

CKEditor React Plugin de redimensionnement d'image

Comment utiliser ImageResize avec react. Je ne trouve aucun échantillon. Je veux redimensionner l'image que j'ajoute à partir de CKEditor sur mon composant de réaction.

<CKEditor editor={ClassicEditor}
      data="<p>Hello from CKEditor 5!</p>"
      onInit={editor => {
        editor.plugins.get(
          "FileRepository"
        ).createUploadAdapter = loader => {
          return new UploadAdapter(loader)
        }

        //editor.plugins.add("ImageResize") or something?

        console.log("Editor is ready to use!", editor)
      }}
      onChange={(event, editor) => {
        const data = editor.getData()
        console.log({ event, editor, data })
      }}
      onBlur={(event, editor) => {
        console.log("Blur.", editor)
      }}
      onFocus={(event, editor) => {
        console.log("Focus.", editor)
      }}
/>
javascriptreactjsckeditorckeditor5ckeditor5-react
5
Burak Kalafat

editor.plugins a une méthode init( plugins, [ removePlugins ] ) → Promise.<LoadedPlugins> qui initialise un ensemble de plugins et les ajoute à la collection.

https://ckeditor.com/docs/ckeditor5/latest/api/module_core_plugincollection-PluginCollection.html

0
acbay

Basé sur les informations de la page de documentation de react :

Bien que vous puissiez facilement modifier la configuration en utilisant la propriété config de <CKEditor> composant qui vous permet de changer la barre d'outils ou de supprimer certains plugins, afin d'ajouter des plugins, vous devez reconstruire l'éditeur .

Vous trouverez une explication complète sur la façon de procéder dans le lien ci-dessus.

Une fois que vous l'avez, vous pouvez importer ImageResize depuis le @ckeditor/ckeditor5-image/src/imageresize:

import ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";

Et utilisez-le dans la configuration de votre CKEditor:

<CKEditor
    config={{ plugins: [ImageResize] }}
    ....
/>
0
Dekel