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

Question

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

首先我尝试了：

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

我的 iframe 中的当前位置只有一个损坏的 link 图标 but。没有图像。然后我被告知要尝试：

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

这不是我想要做的但是在这种情况下我没有解决 link 问题并且图像加载正常。

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

有人可以解释一下如何在预期位置加载图像吗？在插入位置？我读了一些东西，但作为一个初学者，我脑子里都很混乱。

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

Answer 1

取 10 并使用 How to get the image element after insert using execCommand?

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type='file' id="imgInp" />

        </form>

        <div contenteditable id="doc">type here .. put you cursor here [.] and put an inmage in the queue</div>

        <script>
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#doc').focus();
                    document.execCommand("insertHTML", false, "<img src='" + e.target.result + "' />");
                    console.log( 'done');

                }

                reader.readAsDataURL( input.files[0]);
            }
        }

        $("#imgInp").change(function() {
            readURL(this);

        });

        </script>

    </body>

</html>

Answer 2

这是 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]);
  }
}

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

insert image in a iframe at caret location

html

javascript

createobject