Скопируйте изображения из iframe в textarea - PullRequest
Новая
       15

Скопируйте изображения из iframe в textarea

1 голос
/ 14 декабря 2011

Я хотел бы скопировать изображения из iframe в текстовую область. Страницы и iframe не находятся в одном домене или на сервере.

Есть идеи, как этого добиться с помощью JavaScript?

В iframe с изображениями для сбора изображений используется ajax.

Использование:

Например, я хотел бы использовать этот метод для копирования изображений из iframe в текстовый редактор Tinymce WordPress. Например. отобразить iframe с галереей изображений под текстовым редактором, и при нажатии на изображение в iframe изображение должно отобразиться в текстовом редакторе (изображение уже загружено).

Некоторые идеи:

Перетащите швы изображений для работы в IE и FF.

Щелкните правой кнопкой мыши, скопируйте и прошейте изображения швов для работы в IE и C.

Было бы неплохо, если бы я мог получить src изображения в переменной, чтобы иметь возможность добавлять "class" и "alt". 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Copy images from iframe</title>
</head>

<body>

<textarea style="width:100%;height:400px" >I want to be able to get theme here like this
<img src="http://www.page.com/image.jpg" alt="">
</textarea>

<iframe width="100%" height="400px" src="http://www.page-with-images.com/"></iframe>

</body>
</html>

1 Ответ

0 голосов
/ 14 декабря 2011

Попробуйте использовать jQuery .

Добавить событие click к $("iframe img"). В функции click получите изображение src и добавьте его в качестве тега изображения в редактор tinyMCE.

Это будет выглядеть примерно так: 

$(function(){
    $("iframe img").click(function(){
        var update = $("<div>").append(
            $("<img>").attr("src", $(this).attr("src"))
        ).html();

        $("#content").val(function( i, v ) {
            return v + update; 
        });
    });
});

Пример ..

Мы в значительной степени клонируем изображение, помещаем его во временное div, получаем чистый HTML-контент div (чтобы мы преобразовали объект изображения в пригодную для использования строку) и обновляем значение текстовой области вместе с ним. , Конечно, в демонстрационной версии, которую я связал, #fake является эквивалентом iframe в этом случае.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...