如何在 TinyMCE Editor 中插入按钮以在当前位置插入本地文件作为 RAW 图像？答案

【问题标题】：How to insert a button in TinyMCE Editor to insert a local file as RAW image at current position?如何在 TinyMCE Editor 中插入按钮以在当前位置插入本地文件作为 RAW 图像？
【发布时间】：2017-11-16 17:25:29
【问题描述】：

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

【问题讨论】：

你试过什么？步骤似乎是：a）添加一个按钮； b) 使按钮驱动“上传文件”序列； c) 发送文件到服务器； d) 从服务器检索 base64 版本并插入到活动编辑器中。
我不知道如何实现它以及为什么要发送到服务器？ TinyMCE或JS不能在客户端转换吗？
关于 tinymce 按钮的现有文档很多。至于发送到服务器，问题是您无法在本地读取文件。不过，您可以将文件发送到网络服务器。
我没有机会将图像存储在服务器上或将其发送到网络服务以将其转换为原始图像。
然后查看 javascript File API。它会让您在大多数客户端中阅读它。您将获得文件对象（一个 Blob）。将其传递到 File API readAsArrayBuffer()，然后将内容加载回 tinymce。是的，我正在挥手，但这应该让你开始。我建议您先尝试不使用tinymce 以使文件工作正常然后集成。

标签： tinymce

【解决方案1】：

我刚从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;" />

使用上述 URL（查看控制台或检查元素并找到 src）和 inserting an image at the current position，您可以将图像插入到文档中插入符号的当前位置。

【讨论】：