Ionaru / Ionaru/easy-markdown-editor

Is there any working example on how to use the imageUploadFunction

Open
#574 6 comments 0 reactions 0 assignees View on GitHub
Question
Dominant language
JavaScript
Stars
3.1k
Forks
363
PR merge metrics
No merged PRs in 30d

Description

There was a similar question #334, but the answer to that is not working that well.
The image is displayed kinda weird.

**In Markdown, it looks like this:**
![image](https://github.com/Ionaru/easy-markdown-editor/assets/73551199/5f83b066-ff5d-4674-9139-e417a3013a57)
**When Im using the preview it looks like this:**
![image](https://github.com/Ionaru/easy-markdown-editor/assets/73551199/c374c346-54dc-41bb-a857-2f1736d818fa)
**But as soon as I click on the "Z", it looks like this:**
![image](https://github.com/Ionaru/easy-markdown-editor/assets/73551199/29c39684-f33c-4d9b-a941-ce34a57e7f6c)
And there is no other way to go out of the preview, than reloading the website.

The answer to question #334 was this code:
```javascript
(file, onSuccess, onError) => {
const reader = new FileReader();
reader.onload = () => onSuccess(reader.result);
reader.onerror = () => onError("Error loading"+file.name);
reader.readAsDataURL(file)
```

In total my Editor looks like this:
```javascript
const easyMDE = new EasyMDE({
element: document.getElementById("example"),
placeholder: "Nach dem schreiben bitte speichern",
toolbar: [
"bold","italic","heading","|","code","quote","|","unordered-list","ordered-list","table","|","link","upload-image","|","preview","side-by-side","fullscreen","|","guide"
],
uploadImage: true,
imageUploadFunction:
(file, onSuccess, onError) => {
const reader = new FileReader();
reader.onload = () => onSuccess(reader.result);
reader.onerror = () => onError("Error loading"+file.name);
reader.readAsDataURL(file)
// EasyMDE.drawUploadedImage(easyMDE)
}
})
```

It would be nice to have a working example of the imageUploadFunction.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.