вставить изображение в 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?


javascript html createobject
person Didier Tibule    schedule 08.01.2019    source источник
comment
см. здесь stackoverflow.com/questions /4459379/   -  person David Bray    schedule 08.01.2019
comment
Да. Но я учусь, поэтому я хотел бы сделать это в javascript, прежде чем пытаться что-то еще... Я имею в виду, что хотел бы понять, что я делаю...   -  person Didier Tibule    schedule 08.01.2019

Ответы (2)


arrow_upward
0
arrow_downward

возьмите 10 и используйте Как получить элемент изображения после вставки с помощью 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>
person David Bray    schedule 08.01.2019
comment
но я действительно не знаю, что вы делаете - вы используете перетаскивание для добавления изображений, это тоже будет работать, нужно немного адаптироваться .. - person David Bray; 08.01.2019
comment
Я использую тип ввода = файл, чтобы получить имя файла изображения. И я хотел бы, чтобы изображение, выбранное пользователем, отображалось в позиции каретки. Я быстро просмотрел ссылку, которую вы мне прислали. Я думаю, что это поможет мне. Я дам Вам знать. Спасибо. - person Didier Tibule; 08.01.2019
comment
конечно - щелкните этот [.], чтобы установить позицию каретки, и я также могу опубликовать пример iframe - person David Bray; 08.01.2019
comment
Мне нужно бежать, и я не смогу попробовать это прямо сейчас... Да, вы можете отправить пример iframe; Возможно, я научусь лучше делать вещи... - person Didier Tibule; 08.01.2019
comment
Я попробовал решение, предложенное здесь: [lhttps://stackoverflow.com/questions/12507328/how-to-get-the-image-element-after-insert-using-execcommand] У меня все та же проблема. Вставка будет сделана в позиции каретки, но я получаю значок только для неработающей ссылки. Чего я не понимаю, так это того, почему путь подходит при использовании editor.scr второй функции (чего я в любом случае не хочу делать); но не в моем editor.execCommand первой функции, где я хотел бы, чтобы изображение появилось? - person Didier Tibule; 12.01.2019

arrow_upward
0
arrow_downward

Вот версия сценария Дэвида Брея на чистом 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]);
  }
}
person Steve Carey    schedule 23.05.2020