最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - CKEditor React Image Resize Plugin - Stack Overflow

programmeradmin2浏览0评论

How to use ImageResize with react. I can't find any sample. I want to resize image which I add from CKEditor on my react ponent.

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

How to use ImageResize with react. I can't find any sample. I want to resize image which I add from CKEditor on my react ponent.

<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)
      }}
/>
Share Improve this question asked May 13, 2020 at 13:18 Burak KalafatBurak Kalafat 982 silver badges16 bronze badges 0
Add a ment  | 

3 Answers 3

Reset to default 4 +50

I think the one and correct way to do this is you should fork the ClassicEditor and build your own ClassicEditor.

You can follow this to create your own build https://ckeditor./docs/ckeditor5/latest/builds/guides/development/custom-builds.html

After you done with custom your own build, you need to install it from your repository url.

I'm already had a simple custom build that include ImageResize and Base64Uploader in case you want an example: https://github./hmtri1011/ckeditor5-build-classic/blob/stable/src/ckeditor.js

editor.plugins has a method init( plugins, [ removePlugins ] ) → Promise.<LoadedPlugins> that initializes a set of plugins and adds them to the collection.

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

Based on the information on the docs page of react:

While you can change the configuration easily by using the config property of the <CKEditor> ponent which allows you to change the toolbar or remove some plugins, in order to add plugins you need to rebuild the editor.

There is full explanation on how to do this in the above link.

Once you have it, you can import ImageResize from the @ckeditor/ckeditor5-image/src/imageresize:

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

And use it inside your CKEditor's config:

<CKEditor
    config={{ plugins: [ImageResize] }}
    ....
/>
发布评论

评论列表(0)

  1. 暂无评论