how can i add image resizer in create react app project ?

[lochawala]

I have tried to add an image resizer in create react app project but it gives an error

Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css'

[FilipTokarski]

Hi, did you follow docs on image resize? If you'll still encounter some problems, we'll need to have a detailed step-by-step description to reproduce this. It's hard to tell what's going on without seeing the code and other details.

[lochawala]

Hi @FilipTokarski

yes I have followed that doc and try to add resize option from it I've attached my config here can you please check and let me know what was wrong with it and yes I am using react component

<CKEditor
                    editor={ClassicEditor}
                    data={values.description}
                    onReady={editor => {
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                    }}
                    config={
                      {
                        ckfinder: {
                          uploadUrl: process.env.REACT_APP_API_BASE_URL + 'images'
                        },
                        image: {
                          // Configure the available styles.
                          styles: [
                            'alignLeft', 'alignCenter', 'alignRight', 'resizeImage'
                          ],

                          // Configure the available image resize options.
                          resizeOptions: [
                            {
                              name: 'resizeImage:original',
                              label: 'Original',
                              value: null
                            },
                            {
                              name: 'resizeImage:25',
                              value: '25',
                              icon: 'small'
                            },
                            {
                              name: 'resizeImage:50',
                              label: '50%',
                              value: '50'
                            },
                            {
                              name: 'resizeImage:75',
                              label: '75%',
                              value: '75'
                            }
                          ],

                          // You need to configure the image toolbar, too, so it shows the new style
                          // buttons as well as the resize buttons.
                          toolbar: [
                            'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
                            '|',
                            'resizeImage',
                            '|',
                            'imageTextAlternative'
                          ]
                        }
                      }
                    }
                    onChange={(event, editor) => {
                      const data = editor.getData();
                      setFieldValue("description", data);
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                    }}
                    onBlur={(event, editor) => {
                      console.log('Blur.', editor);
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                      const data = editor.getData();
                      setFieldValue("description", data);
                    }}
                    onFocus={(event, editor) => {
                      console.log('Focus.', editor);
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                      const data = editor.getData();
                      setFieldValue("description", data);
                    }}
                  />

[FilipTokarski]

Do you have ImageResize plugin installed? Because I can't see here whether you use Classic Editor build or custom build with this plugin.

[CKEditorBot]

Closing due to lack of activity. If you think the issue is still not resolved, please, re-open it and provide the feedback we asked for.

[ksielyov]

toolbar: [ 'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight', '|', 'resizeImage', '|', 'imageTextAlternative' ]

и че ты придумал? Атрибута style

Hi @FilipTokarski

yes I have followed that doc and try to add resize option from it I've attached my config here can you please check and let me know what was wrong with it and yes I am using react component

<CKEditor
                    editor={ClassicEditor}
                    data={values.description}
                    onReady={editor => {
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                    }}
                    config={
                      {
                        ckfinder: {
                          uploadUrl: process.env.REACT_APP_API_BASE_URL + 'images'
                        },
                        image: {
                          // Configure the available styles.
                          styles: [
                            'alignLeft', 'alignCenter', 'alignRight', 'resizeImage'
                          ],

                          // Configure the available image resize options.
                          resizeOptions: [
                            {
                              name: 'resizeImage:original',
                              label: 'Original',
                              value: null
                            },
                            {
                              name: 'resizeImage:25',
                              value: '25',
                              icon: 'small'
                            },
                            {
                              name: 'resizeImage:50',
                              label: '50%',
                              value: '50'
                            },
                            {
                              name: 'resizeImage:75',
                              label: '75%',
                              value: '75'
                            }
                          ],

                          // You need to configure the image toolbar, too, so it shows the new style
                          // buttons as well as the resize buttons.
                          toolbar: [
                            'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage:original', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
                            '|',
                            'resizeImage',
                            '|',
                            'imageTextAlternative'
                          ]
                        }
                      }
                    }
                    onChange={(event, editor) => {
                      const data = editor.getData();
                      setFieldValue("description", data);
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                    }}
                    onBlur={(event, editor) => {
                      console.log('Blur.', editor);
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                      const data = editor.getData();
                      setFieldValue("description", data);
                    }}
                    onFocus={(event, editor) => {
                      console.log('Focus.', editor);
                      const textData = viewToPlainText(editor.editing.view.document.getRoot())
                      setFieldValue("plain_text", textData);
                      const data = editor.getData();
                      setFieldValue("description", data);
                    }}
                  />

И че ты придумал? Нет такого атрибута styles в config.image

[ksielyov]

Closing due to lack of activity. If you think the issue is still not resolved, please, re-open it and provide the feedback we asked for.

Похоже авторам редактора вообще пофиг на свои решения