时间戳

首页 > 解决方案 > 在插入符号位置的 iframe 中插入图像

javascript - 在插入符号位置的 iframe 中插入图像

问题描述

对于富文本框。我想在插入符号的位置插入用户选择的图片。

首先，我尝试过：

var loadImage = function(event) {
    var editor = editFrame.document;
    editor.execCommand("insertImage", false, event.target.files[0] );
};

我只得到一个断开的链接图标，但在我的 iframe 中的当前位置。没有图像。然后我被告知尝试这样做：

var loadImage = function(event) {
    var editor  =  document.getElementById('editFrame');
    editor.src = URL.createObjectURL(event.target.files[0]);
};

这不是我想要做的，但在这种情况下，我没有链接断开问题并且图像正常加载。

我怎样才能获得两个世界中最好的？:)

有人可以解释一下如何在预期的地方加载图像吗？在插入符号位置？我读了一些东西，但作为一个初学者，这一切都让我很困惑。

请只使用javascript？我的意思是@David Bray 提供的解决方案效果很好。但它使用 JQuery，我不知道它在做什么......或者有人可以将 JQuery 翻译成 Javascript 吗？

标签： javascripthtmlcreateobject

解决方案

这是 David Bray 脚本的纯 JavaScript 版本，并进行了各种其他更改。它与他的答案足够接近，可以认为它只是一个不同的版本，但又太不同了，不能只编辑原始答案。另一个亮点是我在加载图像后将输入元素值设置为空。如果您不这样做并且删除了图像，它将不允许您重新加载它。

const imgInp = document.getElementById('imgInp');
imgInp.onchange = function() {
  if (imgInp.files && imgInp.files[0]) {
    const reader = new FileReader();
    reader.onload = function(event) {
      // Works without the below focus, but you may need it if you modify it.
      document.getElementById('doc').focus();
      document.execCommand('insertImage', false, event.target.result);
      imgInp.value = "";
    }
    reader.readAsDataURL(imgInp.files[0]);
  }
}

推荐阅读