instance-oom / ngx-markdown-editor

Angular markdown editor based on ace editor
http://lon-yang.github.io/markdown-editor/
Apache License 2.0
174 stars 48 forks source link

Can we add a custom image upload button instead of drag and drop? #120

Closed vijilvpillai closed 1 year ago

vijilvpillai commented 2 years ago

Is it possible to add an image upload button?Also can we add image src as a base64 encoded string while uploading the image?

instance-oom commented 2 years ago

Using 4.2.0, then you can add custom buttons on the tool bar as below https://github.com/lon-yang/ngx-markdown-editor/blob/master/demo/src/app/app.component.html#L4-L11

<md-editor>
  <div custom-btns>
    <input #imgInput type="file" style="display: none" (change)="uploadImg($event)" />
    <button type="button" class="btn btn-sm btn-default" (click)="imgInput.click()">Upload Img</button>
  </div>
</md-editor>

https://github.com/lon-yang/ngx-markdown-editor/blob/master/demo/src/app/app.component.ts#L83-L92

uploadImg(evt) {
  if (!evt) return;
  const file = evt.target.files[0];
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    this.content += `![](${reader.result})`
  }, false);

  if (file) reader.readAsDataURL(file);
}