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

Question

How to add a custom / standard button to the TinyMCE editor to select a local image and paste it as a RAW image (BASE64) at the current position in the 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;" />

Run codeHide result

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