insert image in a iframe at caret location

Question

For a rich text box. I want to insert a picture, selected by the user, at the caret's position.

First I tried that:

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

I get only a broken link icon but at the current position in my iframe. No image. Then I've been told to try that:

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

Which is not what I want to do but in this case I don't have broken link problem and the image loads normally.

How can I get the best of the 2 worlds? :)

Can somebody explain me how to load an image where expected; at the caret position? I read some stuff but being a beginner it's all very confuse in my mind.

Using only javascript, please? I mean the solution offered by @David Bray works fine. But it uses JQuery and I have no clue what it's doing whatsoever... Or could someone translate me the JQuery into Javascript?

see here https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — David Bray, Jan 08 '19 at 11:24
Yes. But I'm learning so I wish I could do that in javascript before I try anything else... I mean I would like to understand what I'm doing... — Didier Tibule, Jan 08 '19 at 11:28

David Bray · Accepted Answer · 2019-01-08T11:45:02.027

0

take 10 and using 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>

edited Jan 08 '19 at 11:45

answered Jan 08 '19 at 11:13

David Bray

566
1
3
14

but I don't really know what you are doing - are you using drag and drop to add images, it will work too, have to adapt a bit .. – David Bray Jan 08 '19 at 11:46
I'm using the input type=file to get the name of the image file. And I would like that the image selected by the user shows at the caret's position. I had a quick look at the link you sent me. I think that will do the trick for me. I'll let you know. Thanks. – Didier Tibule Jan 08 '19 at 11:56
sure - click that [.] to set the caret position, and I can post a iframe example too – David Bray Jan 08 '19 at 12:00
I have to run and won't be able to try it right now... Yes you can send iframe example; I'll possibly learn a better way to do things... – Didier Tibule Jan 08 '19 at 12:11
I tried the solution proposed here: [lhttps://stackoverflow.com/questions/12507328/how-to-get-the-image-element-after-insert-using-execcommand] I still have the same problem. The insertion would be made at the caret position but I only get the icon for a broken link. What I don't understand is why the path is ok when using **editor.scr** of the second function (which is not what I want to do anyway); but not in my editor.execCommand of the first function which is where I would like the image to appear? – Didier Tibule Jan 12 '19 at 10:18

Steve Carey · Answer 2 · 2020-05-23T02:39:35.197

Here is a pure JavaScript version of David Bray's script with various other changes. It's close enough to his answer to consider it just a different version but too different to just edit the original answer. One addition to highlight is I'm setting the input element value to empty after loading an image. If you don't do that and you delete an image it won't allow you to reload it.

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

insert image in a iframe at caret location

2 Answers2