I am using Jodit-React for a rich text editor in my React application, and I'm facing difficulties displaying images that I upload. I've tried multiple solutions, but the images don't appear in the editor.
<JoditEditor
ref={editor}
value={content}
config={config}
tabIndex={1} // tabIndex of textarea
{...props}
/>
Upload config
const config = useMemo(() => ({
readonly: false, // all options from https://xdsoft.net/jodit/docs/,
enableDragAndDropFileToEditor: true,
placeholder: 'Start typings...',
uploader: {
url: 'http://localhost:8000/api/upload-image',
imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
//headers: {"token":`${db.token}`},
withCredentials: false,
pathVariableName: 'path',
format: 'json',
method: 'POST',
prepareData: function (formData) {
var file = formData.getAll('files[0]')[0]
formData.append('image', file)
formData.delete('files[0]')
formData.delete('path')
formData.delete('source')
return formData
},
isSuccess: function (resp) {
// console.log("resp", resp);
return !resp.error;
},
getMessage: function (resp) {
// console.log("resp",resp);
return resp.msgs.join("\n");
},
process: function (resp) {
const imageUrl = resp?.imageUrl;
return imageUrl ;
},
}
}), []);
I expect the images to be displayed in the Jodit editor after uploading.
The images do not appear, and not getting any error.
How can I properly display images in the Jodit editor after uploading? Are there any specific configurations or additional steps I need to take? Any help or guidance would be greatly appreciated!
With this change it finally works for me and shows the image