How to change the style of the image in react-froala-wysiwyg?

Viewed 264

I have a question regarding handling the image component of froala-wysiwyg library in React.js.

I added imageEditButtons property to the config object of froala-wysiwyg component which does not seem to work.

The following is my config object.

const froalaConfig = {
        key: process.env.REACT_APP_FROALA_KEY,
        shortcutsEnabled: ['insertImage'],
        placeholderText: 'Edit your content here.',
        shortcutsHint: false,
        attribution: false,
        toolbarButtons: {
            moreText: {
                buttons: [
                    'bold',
                    'italic',
                    'underline',
                    'strikeThrough',
                    'subscript',
                    'superscript',
                    'fontFamily',
                    'fontSize',
                    'textColor',
                    'backgroundColor',
                    'inlineClass',
                    'inlineStyle',
                    'clearFormatting'
                ]
            },
            moreParagraph: {
                buttons: [
                    'alignLeft',
                    'alignCenter',
                    'formatOLSimple',
                    'alignRight',
                    'alignJustify',
                    'formatOL',
                    'formatUL',
                    'paragraphFormat',
                    'paragraphStyle',
                    'lineHeight',
                    'outdent',
                    'indent',
                    'quote'
                ]
            },
            moreRich: {
                buttons: [
                    'insertLink',
                    'insertImage',
                    'insertTable',
                    'emoticons',
                    'fontAwesome',
                    'specialCharacters',
                    'embedly',
                    'insertHR'
                ]
            },
            moreMisc: {
                buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
                align: 'right',
                buttonsVisible: 2
            }
        },
        imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove'],
        imageInsertButtons: ['imageBack', '|', 'imageUpload'],
        imageMaxSize: 5 * 1024 * 1024,
        imageAllowedTypes: ['jpeg', 'jpg', 'png'],
        events: {
            'image.beforeUpload': function beforeUploadImage(images) {
                // Before image is uploaded
                const _this = this;
                const data = new FormData();
                data.append('file', images[0]);

                //  Upload the image on the server
                api.post('/doc/saveFile', data)
                    .then(res => {
                        _this.image.insert(configPaths.filepath + res.data, null, null, _this.image.get());
                    })
                    .catch(err => {
                        console.log(err);
                        dispatch(
                            showMessage({
                                message: SERVER_ERROR,
                                autoHideDuration: 2000,
                                anchorOrigin: {
                                    vertical: TOP,
                                    horizontal: CENTER
                                },
                                variant: ERROR
                            })
                        );
                    });
                return false;
            },
            'image.removed': function removedImage(image) {
                const fileName = image.attr('src').replace(configPaths.filepath, '');

                //  Delete the image on the server
                api.delete(`/doc/deleteFile/${fileName}`)
                    .then(res => {
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                        dispatch(
                            showMessage({
                                message: SERVER_ERROR,
                                autoHideDuration: 2000,
                                anchorOrigin: {
                                    vertical: TOP,
                                    horizontal: CENTER
                                },
                                variant: ERROR
                            })
                        );
                    });
            },
            'image.error': function insertedImage(error, res) {
                console.log(error);
            }
        }
    };

The documentation of froala, describes how this mageEditButtons property works.

https://froala.com/wysiwyg-editor/docs/options/#imageEditButtons

But it doesn't works in my React.js component implementation.

Any help would be appreciated.

Thanks.

0 Answers
Related