web-dev-qa-db-ja.com

CKEditor React画像サイズ変更プラグイン

ImageResizeをreactで使用する方法。サンプルが見つかりません。反応コンポーネントのCKEditorから追加した画像のサイズを変更したいと思います。

<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には、プラグインのセットを初期化してコレクションに追加するメソッドinit( plugins, [ removePlugins ] ) → Promise.<LoadedPlugins>があります。

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

0
acbay

反応の docsページの情報に基づいて ：

ツールバーを変更したり一部のプラグインを削除したりできる<CKEditor>コンポーネントのconfigプロパティを使用すると、設定を簡単に変更できますが、再構築する必要があるプラグインを追加するにはエディター。

上記のリンクでこれを行う方法の完全な説明があります。

取得したら、@ckeditor/ckeditor5-image/src/imageresizeからImageResizeをインポートできます。

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

そして、それをCKEditorの構成内で使用します。

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