VPF::execCommand для разных браузеров - Форум программистов

Lely

Дата 14.7.2010, 13:54 (ссылка)

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

Загрузка ...

Новичок

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

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

Всем доброго времени суток
Сразу изложу суть проблемы: execCommand, с помощью которого пытаюсь сделать wysiwyg редактор работает хорошо в IE (это и понятно), и отказывается (причем частично) работать в Opera и Mozilla
а именно

Код


function doFont(fName) 
{ 
iframe.focus();
iframe.document.selection.createRange();
if(fName != '') 
iframe.document.execCommand('fontname', false, fName); 
}

эта функция меняет имя шрифта в зависимости от значения выпадающего списка fName

так вот она работает в IE и отказывается работать в Opera и Mozilla

в тоже время я сделала две проверочные функции, которые вызываются так
первая функция сменит шрифт на Verdana

Код


<a href="#" onClick="command('fontNm'); return false;" />FontName</a> |

вторая должна опять менять имя шрифта в зависимости от значения выпадающего списка ontSelect

Код


<select name="fontSelect" id="fontSelect" onChange="doFont(this.options[this.selectedIndex].value)">
<option value="" selected>Шрифт</option>
<option value="serif">По умолчанию</option>
<option value="sans-serif">Arial</option>
<option value="serif">Times New Roman</option>
<option value="cursive">Курсивный</option>
<option value="monospace">Моноширинный</option>
</select>

вот их код

Код


function command(c, b) {
   iframe.focus();
...
   if(c == 'fontNm') {
      iframe.document.execCommand('FontName', false, 'Verdana');
   }
   if(c == 'fontName') {
      fontN = document.getElementById('fontSelect').value;
      if(fontN!='*')
      {
         iframe.document.execCommand('fontName', false, fontN);
      }
   }
   if(c == 'fontSize') {
      fontS = document.getElementById('sizeSelect').value;
      if(fontS!='*')
      {
         iframe.document.execCommand('fontSize', false, fontS);
      }
   }
...
   return false;
}

первая функция (меняющая шрифт на Verdana) не работает в IE и замечательно работает в Opera и Mozilla
вторая функция почемуто не работает нигде, точнее срабатывает сначала, но генерирует ошибку и возвращает false

и еще одна функция в приведенном скрипте меняющая размер шрифта работает везде хорошо, хотя сделана точно так же как вторая абсолютно не работающая функция

помогите распутаться пожалуйста

skyboy

Дата 14.7.2010, 14:59 (ссылка)

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

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

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

Цитата(Lely @ 14.7.2010, 12:54

)

так вот она работает в IE и отказывается работать в Opera и Mozilla

там по-другому надо работать с выделением. selection.createRange() и вызывает ошибку.

Amphiluke

Дата 14.7.2010, 15:12 (ссылка)

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

Загрузка ...

☽

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

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

ИМХО, проблема даже в другом…

Цитата(Lely @ 14.7.2010, 17:54

)

iframe.document.execCommand('fontname', false, fName);

iframe.document — это что?

И что если попробовать вместо этого нечто такое:

Код


iframe.contentWindow.document.execCommand('fontname', false, fName);

Добавлено через 2 минуты и 21 секунду
А selection.createRange() по-моему можно убрать вообще…

Lely

Дата 14.7.2010, 15:52 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата

iframe.document — это что?

это я так обращаюсь к iframe моего документа

Цитата

А selection.createRange() по-моему можно убрать вообще…

а как же убрать если execCommand с выделением работает только? или я совсем ничего не понимаю(((

Добавлено через 3 минуты и 16 секунд
Amphiluke, а то что вы предлагаете...я делала и прописывала в общем скрипте...с задумкой чтоб выполнялось для всех функций...извините, что сразу не написала smile

Код


function saved() {
    if(document.getElementById('edithtml').style.display == 'none')
     document.getElementById("edithtml").value = iframe.document.body.innerHTML;
    document.form.submit();
    return false;
}

function doFont(fName) 
{ 
iframe.focus();
iframe.document.selection.createRange();
if(fName != '') 
iframe.document.execCommand('fontname', false, fName); 
} 

function command(c, b) {
    iframe.focus();
    if(c == 'link') {
        if(iframe.document.selection.createRange().text == false)
         alert('Выделите текст!');
        else {
            url = prompt('Введите URL:', 'http://');
            iframe.document.execCommand('createlink', false, url);
        }
    }
    if(c == 'image') {
        url = prompt('Введите URL изображения:', '');
        iframe.document.execCommand('insertimage', false, url);
    }
    if(c == 'foreColor') {
        iframe.document.execCommand('foreColor', false, '#FF0000');
    }
    if(c == 'fontNm') {
        iframe.document.execCommand('FontName', false, 'Verdana');
    }
    if(c == 'fontName') {
        fontN = document.getElementById('fontSelect').value;
        if(fontN!='*')
        {
            iframe.document.execCommand('fontName', false, fontN);
            alert(fontN);
        }
    }
    if(c == 'fontSize') {
        fontS = document.getElementById('sizeSelect').value;
        if(fontS!='*')
        {
            iframe.document.execCommand('fontSize', false, fontS);
        }
    }
    else if(c == 'html') { 
        document.getElementById('edithtml').style.display = 'block';
        document.getElementById('panel').style.display = 'none';
        document.getElementById('edit').style.display = 'none';
        document.getElementById('edithtml').value = iframe.document.body.innerHTML;
    }
    else if(c == 'design') {
        document.getElementById('edithtml').style.display = 'none';
        document.getElementById('panel').style.display = 'block';
        document.getElementById('edit').style.display = 'block';
        iframe.document.body.innerHTML = document.getElementById('edithtml').value;
    }
    else if(b) {
        if(iframe.document.selection.createRange().text == false)
         alert('Выделите текст!');
        else {
            iframe.document.execCommand('formatblock', false, '<'+b+'>');
        }
    }
    else {
        iframe.document.execCommand(c, null, false);
    }
    return false;
}

iframe = document.getElementById('edit').contentWindow;
iframe.document.designMode = 'on';
iframe.focus();

вот в самом конце

Amphiluke

Дата 14.7.2010, 16:02 (ссылка)

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

Загрузка ...

☽

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

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

Lely, я скопировал ваш код с той поправкой, о которой говорил (насчет contentWindow).

У меня это работает во всех браузерах (IE 7, FF 3.5, Opera 9.6, Chrome)

Код


<!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;
        iframe.document.designMode = "on";
    }
    function doFont(fName) 
    { 
    iframe.focus();
    if(fName != '') 
    iframe.document.execCommand('fontname', false, fName); 
    } 
</script>
</head>

<body>
    <p><a href="#" onclick="command('fontNm'); return false;">FontName</a></p>
    <form action="#">
    <select name="fontSelect" id="fontSelect" onchange="doFont(this.options[this.selectedIndex].value)">
    <option value="" selected="selected">Шрифт</option>
    <option value="serif">По умолчанию</option>
    <option value="sans-serif">Arial</option>
    <option value="serif">Times New Roman</option>
    <option value="cursive">Курсивный</option>
    <option value="monospace">Моноширинный</option>
    </select>
    </form>
    <iframe id="ifr" height="250" width="75%"></iframe>
</body>
</html>

Добавлено через 3 минуты и 35 секунд
Либо я не пойму, что требуется. Выделяем текст, выбираем из выпадающего списка шрифт — шрифт выделенного куска меняется. Так?

Добавлено через 10 минут и 36 секунд

Цитата(Lely @ 14.7.2010, 19:52

)

а как же убрать если execCommand с выделением работает только?

Ну вот вы создаете объект Range методом createRange. И никуда не запоминаете результат возвращаемый методом. И что же тогда дает создание объекта Range, ведь никаких манипуляций вы с ним дальше не производите.

Lely

Дата 14.7.2010, 16:29 (ссылка)

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

Загрузка ...

Новичок

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

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

извиняюсь...вы действительно очень правы вот здесь

Цитата

я эту строчку просмотрела и не удалила в первый раз....а после ее удаления все заработало) smile

спасибо большое)...

но всетаки интересно.почему не работает когда я вот так делаю

Код


...
   if(c == 'fontName') {
      fontN = document.getElementById('fontSelect').value;
      if(fontN!='*')
      {
         iframe.document.execCommand('fontName', false, fontN);
      }
   }

...

ведь с изменением размера шрифта это все срабатывает

Это сообщение отредактировал(а) Lely - 14.7.2010, 16:35

Amphiluke

Дата 14.7.2010, 16:37 (ссылка)

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

Загрузка ...

☽

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

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

Lely, ну я ж вам говорю: уберите

Цитата(Lely @ 14.7.2010, 20:29

)

iframe.document.selection.createRange();

из функции doFont

Добавлено через 1 минуту и 41 секунду
А строку

Цитата(Lely @ 14.7.2010, 20:29

)

iframe.focus();

из конца скрипта перенесите в обработчик события onload объекта window

Lely

Дата 14.7.2010, 16:43 (ссылка)

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

Загрузка ...

Новичок

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

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

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

Код


function command(c, b) {
    iframe.focus();
    if(c == 'link') {
        if(iframe.document.selection.createRange().text == false)
         alert('Выделите текст!');
        else {
            url = prompt('Введите URL:', 'http://');
            iframe.document.execCommand('createlink', false, url);
        }
    }
    if(c == 'image') {
        url = prompt('Введите URL изображения:', '');
        iframe.document.execCommand('insertimage', false, url);
    }
    if(c == 'foreColor') {
        iframe.document.execCommand('foreColor', false, '#FF0000');
    }
    if(c == 'fontName') {
        fontN = document.getElementById('fontSelect').value;
        if(fontN!='*')
        {
            iframe.document.execCommand('fontName', false, fontN);
            alert(fontN);
        }
    }
    if(c == 'fontSize') {
        fontS = document.getElementById('sizeSelect').value;
        if(fontS!='*')
        {
            iframe.document.execCommand('fontSize', false, fontS);
        }
    }
    else if(c == 'html') { 
        document.getElementById('edithtml').style.display = 'block';
        document.getElementById('panel').style.display = 'none';
        document.getElementById('edit').style.display = 'none';
        document.getElementById('edithtml').value = iframe.document.body.innerHTML;
    }
    else if(c == 'design') {
        document.getElementById('edithtml').style.display = 'none';
        document.getElementById('panel').style.display = 'block';
        document.getElementById('edit').style.display = 'block';
        iframe.document.body.innerHTML = document.getElementById('edithtml').value;
    }
    else if(b) {
        if(iframe.document.selection.createRange().text == false)
         alert('Выделите текст!');
        else {
            iframe.document.execCommand('formatblock', false, '<'+b+'>');
        }
    }
    else {
        iframe.document.execCommand(c, null, false);
    }
    return false;
}

а редактирование заголовков вызываю так

Код


<select name="hSelect" id="hSelect" onChange="command('', this.options[this.selectedIndex].value); return false;">
    <option value="" selected>Заголовок</option>
    <option value="h1">H1</option>
    <option value="h2">H2</option>
    <option value="h3">H3</option>
    <option value="h4">H4</option>
</select>

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

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

Цитата

Lely, ну я ж вам говорю: уберите

все уже убрала...изменение шрифта везде хорошо работает... спасибо)

Добавлено через 4 минуты и 31 секунду
там наверно опять из-за этого

Код


if(iframe.document.selection.createRange().text == false)

не работает...сейчас переделаю без проверки

Добавлено через 9 минут и 35 секунд
точно...все заработало...спасибо большое smile

вот только плохо наверно не проверять выделен ли тект или нет....

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

как бы это сделать для оперы и мозилы?

Amphiluke

Дата 14.7.2010, 16:58 (ссылка)

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

Загрузка ...

☽

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

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

Там, где необходимо, следует заменить IE-only код вида

Цитата(Lely @ 14.7.2010, 20:43

)

iframe.document.selection

кроссбраузерным вариантом

Код


var sel = (iframe.getSelection) ? iframe.getSelection() : iframe.document.selection;

Вот например, у вас в скрипте идет такой код:

Цитата(Lely @ 14.7.2010, 20:43

)

    else if(b) {
        if(iframe.document.selection.createRange().text == false)
         alert('Выделите текст!');
        else {
            iframe.document.execCommand('formatblock', false, '<'+b+'>');
        }
    }

Вместо этого нужно писать

Код


    else if(b) {
        var sel = (iframe.getSelection) ? iframe.getSelection() : iframe.document.selection;
        var txt = (sel.getRangeAt) ? sel.getRangeAt(0).toString() : sel.createRange().text;
        if(!txt)
         alert('Выделите текст!');
        else {
            iframe.document.execCommand('formatblock', false, '<'+b+'>');
        }
    }

Ну и т.д. Вроде так

Это сообщение отредактировал(а) Amphiluke - 14.7.2010, 17:02

Lely

Дата 14.7.2010, 17:09 (ссылка)

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

Загрузка ...

Новичок

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

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

Amphiluke, спасибо вам большое за помощь...

просто не знаю что бы без вас делала... smile

Это сообщение отредактировал(а) Lely - 14.7.2010, 17:17

Amphiluke

Дата 14.7.2010, 17:13 (ссылка)

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

Загрузка ...

☽

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

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

Lely, простите, я исправил уже. Добавил вызов метода toString()

Цитата(Amphiluke @ 14.7.2010, 20:58

)

Код


var txt = (sel.getRangeAt) ? sel.getRangeAt(0).toString() : sel.createRange().text;

Или речь не об этом?

Lely

Дата 14.7.2010, 17:19 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата

Lely, простите, я исправил уже. Добавил вызов метода toString()

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

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