VPF::chrome, editable iframe и выделение картинки

Frozen_Coyote

Дата 22.3.2011, 17:26 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 230
Регистрация: 20.9.2007

Репутация: нет
Всего: нет

Приветствую,

друзья, подскажите, кто знает: мне нужно во wysiwyg своем разрешить как то chrome и safari одним кликом выделять картинку, находящуюся внутри моего iframe . Вариант волочения курсора мыши с зажатой клавишей не совсем адекватен - хочется по клику на картинке сделаеть ее выделенной. Это как делается - средствами webkit? Или как? Или вообще не делается? В Tiny gприклике на картинку она становится выделенной - не так красиво как в ИЕ или Фаере - с рамочкой - но хотя бы выделенной. Не допер, честно говоря, хотя webkit поизучал.

Подскажите плиз как?

Amphiluke

Дата 3.4.2011, 11:44 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Млин…

Человек обратился за помощью в PM. Поскольку о существовании этой темы я тогда не знал, то отвечая, я в конце посоветовал ему такие вопросы задавать на форуме, поскольку это может и другим когда-нибудь пригодиться. LOL.

Решение предложил следующее:

Цитата(Amphiluke @ 2.4.2011, 17:18)

В Webkit`е помещать изображение в выделение при клике очень просто.
Вот пример.

Это родительский для iframe документ.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    window.onload = function() {
        iframe = document.getElementById("ifr");
        if (iframe.contentWindow) iframe = iframe.contentWindow;
        idoc = iframe.contentDocument || iframe.document;
        idoc.designMode = "on";
    }
</script>
</head>

<body>
    <iframe src="iframe.html" name="ifr" id="ifr" style="width: 100%; height: 350px;"></iframe>
</body>
</html>

А это документ самого iframe (iframe.html).

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function foo(o) {
        var sel = window.getSelection();
        sel.collapse(o, 1);
        sel.extend(o, 0);
    }
</script>
</head>
<body>
    <p><strong>sssssss</strong> ffffffff</p>
    <div>oooooooooooo</div>
    <p>This <img src="logo.gif" alt="" onclick="foo(this);" /> is an image</p>
    <p>wwwwwwwwwwwwwwwww</p>
</body>
</html>

Frozen_Coyote

Дата 5.4.2011, 10:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 230
Регистрация: 20.9.2007

Репутация: нет
Всего: нет

спасибо! отличное решение! едиснвтенно что - а можно как то обработчик onClick вынести вне картинки? ну какой то типа там AddEvent прикрутить? а то человек когда вставляет изображение - может и не знать, что надо ему в Хроме сделть чтобы выделить картинку. а во остальном - супер супер все! спасибо!!

Amphiluke

Дата 5.4.2011, 19:40 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Цитата(Frozen_Coyote @ 5.4.2011, 14:10

)

а можно как то обработчик onClick вынести вне картинки?

Да, конечно. Можно все скрипты прописать в родительском для iframe документе.
Получится примерно так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function ifrClick(e) {
        if (e.target.nodeName.toLowerCase() == "img") {
            var sel = this.getSelection();
            sel.collapse(e.target, 1);
            sel.extend(e.target, 0);
        }
    }
    
    window.onload = function() {
        var iframe = document.getElementById("ifr");
        if (iframe.contentWindow) iframe = iframe.contentWindow;
        idoc = iframe.contentDocument || iframe.document;
        idoc.designMode = "on";
        if (iframe.addEventListener) {
            iframe.addEventListener("click", ifrClick, false);
        }
    }
</script>
</head>

<body>
    <iframe src="iframe.html" name="ifr" id="ifr" style="width: 100%; height: 350px;"></iframe>
</body>
</html>

Это сообщение отредактировал(а) Amphiluke - 5.4.2011, 19:52

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »