вставить изображение в iframe в месте расположения каретки - PullRequest
Новая
       31

вставить изображение в iframe в месте расположения каретки

0 голосов
/ 08 января 2019

Для расширенного текстового поля. Я хочу вставить изображение, выбранное пользователем, в положение каретки.

Сначала я попробовал это: 

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

Я получаю только значок неработающей ссылки , но в текущей позиции в моем фрейме. Нет изображения. Тогда мне сказали попробовать это: 

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

Это не то, что я хочу сделать , но , в этом случае у меня нет проблем со сломанной ссылкой, и изображение загружается нормально.

Как я могу получить лучшее из 2 миров? :)

Может кто-нибудь объяснить мне, как загрузить изображение там, где ожидается; в положении каретки? Я читаю кое-что, но, будучи новичком, все это очень запутанно.

Используя только JavaScript, пожалуйста? Я имею в виду, что решение, предложенное Дэвидом Бреем, работает отлично. Но он использует JQuery, и я понятия не имею, что он делает вообще ... Или кто-то может перевести мне JQuery в Javascript?

1 Ответ

0 голосов
/ 08 января 2019

взять 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>
...