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
3 Answers
Reset to default 4 +50I 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] }}
....
/>