Open dhenry123 opened 5 months ago
This works too
useEffect(() => {
const handlePaste = async (event) => {
const clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData && clipboardData.items) {
for (const item of clipboardData.items) {
if (item.type.indexOf('image') !== -1) {
const blob = item.getAsFile();
const reader = new FileReader();
reader.onload = () => {
const base64Data = reader.result.split(',')[1];
// console.log('Base64 Image Data:', base64Data);
uploadImageToAPI(base64Data, event)
};
reader.readAsDataURL(blob);
}
}
} else {
// console.log('Text Data:', clipboardData.getData('text'));
}
};
const textInput = document.querySelector('.w-md-editor-text-input');
if (textInput) {
textInput.addEventListener('paste', handlePaste);
}
return () => {
if (textInput) {
textInput.removeEventListener('paste', handlePaste);
}
};
}, []);
I also added a little loader in the toolbar :
const upload = {
name: "upload",
keyCommand: "upload",
buttonProps: { "aria-label": "Insert help" },
icon: (
<div className="material-icons-outlined" style={{fontSize:'12px',animation:'spin 2s linear infinite',display:['none','block'][uploading]}}>cached</div>
),
};
thanks you so much, It helps me a lot
First of all, thank you very much for your excellent work.
Prepare your server
2 routes :
{url: "[url to retrive image calling getImage], alt: "image name alternative"}
UI
The process is as follows:
![altname](url)
image to the clipboard and the contents of the clipboard are pasted into the markdown editorWith React, build your component