How to insert a button in TinyMCE Editor to insert a local file as RAW image at current position?

Question

How can i add a custom/default button to the TinyMCE Editor, to be able to select a local image and insert it as RAW (BASE64) image at current position in editor?

Answer 1

I just tried this from this answer.

window.onload = function () {
  document.getElementById("fileName").onchange = function () {
    var reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload = function () {
      console.log(reader.result);
      document.getElementById("img").src = reader.result;
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
    };
  };
};

<input type="file" name="fileName" id="fileName" /><br />
<img src="https://dummyimage.com/250x75/000/fff.png&text=Select+an+Image" id="img" style="max-width: 250px; max-height: 75px;" />

Using the above URL (see console or inspect element and find the src) and with inserting an image at the current position, you can insert the image inside the document at the current position of caret.