如何在TinyMCE编辑器中插入一个按钮,将本地文件作为RAW图像插入当前位置？

Question

如何在TinyMCE编辑器中添加自定义/默认按钮,以便能够选择本地图像并将其作为RAW(BASE64)图像插入编辑器中的当前位置？

Answer 1

我刚刚从这个答案中尝试过这个。

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;" />

使用上面的 URL（请参阅控制台或检查元素并找到 ）src并在当前位置插入图像，您可以在文档中插入符号的当前位置插入图像。