Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> wysiwyg с методом execCommand/Сохранение, содержание iframe в Opera и Mozilla 
:(
    Опции темы
Lely
Дата 22.7.2010, 09:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Всем доброго времени суток...
Тут такая проблема...
Пишу wysiwyg с методом execCommand...Изменение размера шрифта, его начертания и цвета делается так
Код

<font size="large">Text</font>

А мне надо чтобы это происходило вот так
Код

<span style="font-size: large">Text</span>

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

...
    var Felements = new Array();
    Felements = iframe.document.body.all.tags('font');
    for (i=0; i<Felements.length; i++)
    {
        if (fName = Felements[i].getAttribute('face', 2))
            Felements[i].style.fontFamily = fName;
        if (fSize = Felements[i].getAttribute('size', 2))
        {
            if (fSize==1)
                Felements[i].style.fontSize = 'xx-small';
            if (fSize==2)
                Felements[i].style.fontSize = 'small';
            if (fSize==3)
                Felements[i].style.fontSize = 'medium';
            if (fSize==4)
                Felements[i].style.fontSize = 'large';
            if (fSize==5)
                Felements[i].style.fontSize = 'x-large';
            if (fSize==6)
                Felements[i].style.fontSize = 'xx-large';
            if (fSize==7)
                Felements[i].style.fontSize = '25pt';
        }
        if (fCol = Felements[i].getAttribute('color', 2))
            Felements[i].style.color = fCol;
        Felements[i].clearAttributes();
    }
...

все работает как надо в IE...а в Opera и Mozilla не раюотает вообще...
я думаю что им этот код не нравится уже со второй строчки...но как под них ее исправить не знаю...
подскажите пожалуйста smile 

на всякий случай еще вот
Код

iframe = document.getElementById('edit');
if (iframe.contentWindow) iframe = iframe.contentWindow;

все остальное в редакторе работает во всех браузерах...из чего делаю вывод что переменную iframe они все воспринимают нормально...
PM   Вверх
EmilRegis
Дата 22.7.2010, 09:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 1
Всего: 4
так вы гляньте в консоль ошибок..что там написано
PM MAIL   Вверх
Amphiluke
Дата 22.7.2010, 12:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 35
Всего: 112
Вот такая вот альтернатива… Выглядит страшновато, потому что пришлось учитывать особенности каждого браузера. Например, FF задает атрибуты style в тегах font, и их приходится переносить на span. А IE не задает атрибуты style. А Opera вообще вкладывает теги font друг в друга, поэтому необходимо выполнять фунукцию рекурсивно. 
Код

function font2Span(parentEl) {
    var fontSizes = {"1": "xx-small", "2": "small", "3": "medium", "4": "large", "5": "x-large", "6": "xx-large", "7": "25pt"};
    if (!parentEl) parentEl = iframe.document;
    var fontTags = parentEl.getElementsByTagName("font");
    var span;
    var prop = null;
    for (var i = 0; i < fontTags.length; i++) {
        // возможны вложенные теги font. Перебираем рекурсивно
        if (fontTags[i].getElementsByTagName("font").length > 0) font2Span(fontTags[i]);
        span = iframe.document.createElement("span");
        if (fontTags[i].getAttribute("style", 2)) {
            prop = fontTags[i].getAttribute("style");
            prop = prop.split(/\s*;\s*/);
            var rule;
            for (var j = 0; j < prop.length; j++) {
                rule = prop[j].split(/\s*:\s*/);
                if (!rule[1]) continue;
                // замены типа font-family -> fontFamily
                /-([a-z]{1})/.exec(rule[0]);
                rule[0] = rule[0].replace(/-([a-z]{1})/, RegExp.$1.toUpperCase());
                span.style[rule[0]] = rule[1];
            }
        }
        prop = fontTags[i].getAttribute("size", 2);
        if (prop) span.style.fontSize = fontSizes[prop];
        prop = fontTags[i].getAttribute("face", 2);
        if (prop) span.style.fontFamily = prop;
        prop = fontTags[i].getAttribute("color", 2);
        if (prop) span.style.color = prop;
        span.innerHTML = fontTags[i].innerHTML;
        fontTags[i].parentNode.insertBefore(span, fontTags[i]);
        fontTags[i].parentNode.removeChild(fontTags[i]);
    }
}
PM   Вверх
Lely
Дата 22.7.2010, 20:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Amphiluke, спасибо вам большое. Вы опять меня выручаете... smile 
вот только функция действительно очень гениальная и очень страшная...ну в хорошем смысле)))...она у меня раотает во всех браузерах...но она почему-то если задан размер шрифта переделывает его из
<font size="5">Text</font>
в
<span size="5">Text</span>
а по идее должно быть так
<span style="font-size: large">Text</span>

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

я просто хочу понять где ошибаюсь...чтобы лишний раз вас не доставать своими проблемами smile

Добавлено через 13 минут и 29 секунд
Я вот тут вношу изменения....
Код

    var Felements = new Array();
    Felements = iframe.document.getElementsByTagName('font');
    for (i=0; i<Felements.length; i++)
    {
        if (fName = Felements[i].getAttribute('face', 2))
            Felements[i].style.fontFamily = fName;
        if (fSize = Felements[i].getAttribute('size', 2))
        {
            if (fSize==1)
                Felements[i].style.fontSize = 'xx-small';
            if (fSize==2)
                Felements[i].style.fontSize = 'small';
            if (fSize==3)
                Felements[i].style.fontSize = 'medium';
            if (fSize==4)
                Felements[i].style.fontSize = 'large';
            if (fSize==5)
                Felements[i].style.fontSize = 'x-large';
            if (fSize==6)
                Felements[i].style.fontSize = 'xx-large';
            if (fSize==7)
                Felements[i].style.fontSize = '25pt';
        }
        if (fCol = Felements[i].getAttribute('color', 2))
            Felements[i].style.color = fCol;
        Felements[i].clearAttributes();
    }

и нашлась проблема в последней строчке когда я удаляю атрибуты тега ФОНТ чтобы потом его просто заменить на СПАН в содержимом АЙФРЕЙМА как в строке...ИЕ принимает это... а в Опере с Мозилой надо наверно как-то по другому писать? smile 
PM   Вверх
Lely
Дата 22.7.2010, 21:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
все... у меня получилось smile 
Код

    var Felements = new Array();
    Felements = iframe.document.getElementsByTagName('font');
    for (i=0; i<Felements.length; i++)
    {
        if (fName = Felements[i].getAttribute('face', 2))
        {
            Felements[i].style.fontFamily = fName;
            Felements[i].removeAttribute('face');
        }
        if (fSize = Felements[i].getAttribute('size', 2))
        {
            if (fSize==1)
                Felements[i].style.fontSize = 'xx-small';
            if (fSize==2)
                Felements[i].style.fontSize = 'small';
            if (fSize==3)
                Felements[i].style.fontSize = 'medium';
            if (fSize==4)
                Felements[i].style.fontSize = 'large';
            if (fSize==5)
                Felements[i].style.fontSize = 'x-large';
            if (fSize==6)
                Felements[i].style.fontSize = 'xx-large';
            if (fSize==7)
                Felements[i].style.fontSize = '25pt';
            Felements[i].removeAttribute('size');
        }
        if (fCol = Felements[i].getAttribute('color', 2))
        {
            Felements[i].style.color = fCol;
            Felements[i].removeAttribute('color');
        }
    }

вместо clearAttributes надо было три раза написать removeAttribute с разными параметрами
спасибо вам еще раз, Amphiluke  smile 
PM   Вверх
Amphiluke
Дата 22.7.2010, 21:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 35
Всего: 112
Цитата(Lely @  23.7.2010,  00:57 Найти цитируемый пост)
но она почему-то если задан размер шрифта переделывает его из
<font size="5">Text</font> в
<span size="5">Text</span>

Не… Я у себя проверил в четырех браузерах, и никаких <span size="5"> не обнаружил. Везде <span style="font-size: large"> smile



Цитата(Lely @  23.7.2010,  00:57 Найти цитируемый пост)
 когда я удаляю атрибуты тега ФОНТ чтобы потом его просто заменить на СПАН в содержимом АЙФРЕЙМА как в строке...ИЕ принимает это... а в Опере с Мозилой надо наверно как-то по другому писать?

Да, метод clearAttributes известен только IE. В остальных… даже не вспомню на вскидку, есть ли аналог. Только по отдельности removeAttribute или removeAttributeNode. А разве clearAttributes очищает атрибут style?

Добавлено через 48 секунд
Блин, не обновил страничку, поэтому не видел вашего последнего сообщения. 
PM   Вверх
Lely
Дата 22.7.2010, 21:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
я еще раз решила посмотреть вашу функцию...вдруг она сливает друг за другом идущие спаны в один...оказалось нет =(...и она мне выдала после оперы вот такой результат

Код

<p><span style=\"font-family: sans-serif\">яяяяяяяяяяяяяяяяяяяяяя</span></p><p><span size=\"5\">яяяяяяяяяяяяяяяяяяяяяя</span></p><p><span style=\"color: #ff0000\">яяяяяяяяяяяяяяяя</span></p><p><span face=\"monospace\"><span style=\"font-size: medium\"><span style=\"color: #00ff00\">яяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяя</span></span></span></p>

значит она еще и с именем шрифта неправильно иногда работает...

Добавлено через 1 минуту и 33 секунды
Цитата

Я у себя проверил в четырех браузерах, и никаких <span size="5"> не обнаружил. Везде <span style="font-size: large">

странно...а у меня вот шалит =((

Добавлено через 5 минут и 19 секунд
Цитата

А разве clearAttributes очищает атрибут style?

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

я сначала тоже думала сделать как вы....потом решила что просто заменить будет проше smile 
PM   Вверх
Amphiluke
Дата 22.7.2010, 21:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 35
Всего: 112
Lely, ну не знаю. Вообще говоря, ваш код у меня почему-то совсем не работает ни в FF, ни в Opera. smile  Это я к тому, что при возможности проверьте на других компах и/или других версиях браузеров. 

P.S. А почему функция должна сливать span'ы?

Это сообщение отредактировал(а) Amphiluke - 22.7.2010, 21:41
PM   Вверх
Lely
Дата 22.7.2010, 21:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
с вкладыванием всего в один спан заморачиваться не буду...я думаю не так уж это страшно с точки зрения html, да?

Добавлено через 5 минут и 12 секунд
Цитата

P.S. А почему функция должна сливать span'ы?

ну так бы было красивей наверно....менее избыточно, нет?

Цитата

ваш код у меня почему-то совсем не работает ни в FF, ни в Opera

а в ИЕ работает?...там же совсем не весь код...всмысле до и после этого там же тоже всего куча понаписана...эт просто кусочек

Цитата

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

да конечно...это первым делом проверю smile 
PM   Вверх
Amphiluke
Дата 22.7.2010, 22:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

Репутация: 35
Всего: 112
Цитата(Lely @  23.7.2010,  01:42 Найти цитируемый пост)
ну так бы было красивей наверно....менее избыточно, нет?

Ну да, в принципе. smile


Цитата(Lely @  23.7.2010,  01:42 Найти цитируемый пост)
там же совсем не весь код...всмысле до и после этого там же тоже всего куча понаписана...эт просто кусочек

Ну, я этот кусочек испытывал на вашем же коде из этой темы. Но да, конечно, вполне возможно, что у меня не работает из-за того, что остальной код не совпадает с тем, который испытываете вы.
PM   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0567 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.