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.