VPF::Скрипт вставки bb кодов - Форум программистов

spamoney

Дата 28.4.2010, 12:54 (ссылка)

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

Загрузка ...

Новичок

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

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

Здравствуйте, помогите решить следующую проблему:

Есть скрипт для вставки BB кода и сохранения выделения текста (т.е после вставки bb кода текст остаётся выделенным):

Код

function click_bb(aid,Tag) {
  var Open='['+Tag+']';
  var Close='[/'+Tag+']';
    if (window.attachEvent && navigator.userAgent.indexOf('Opera') === -1) {
        var doc = document.getElementById(aid);
        doc.focus();
        sel = document.selection.createRange();
        sel.text = Open+sel.text+Close;
        doc.focus();
    }    else {
        docs = document.getElementById(aid);
        var doc = docs[0];
        var ss = doc.scrollTop;
        sel1 = doc.value.substr(0, doc.selectionStart);
        sel2 = doc.value.substr(doc.selectionEnd);
        sel = doc.value.substr(doc.selectionStart,
        doc.selectionEnd - doc.selectionStart);
        var text = doc.firstChild;
        doc.value = sel1 + Open + sel + Close + sel2;
        selPos = Open.length + sel1.length + sel.length + Close.length;
        doc.setSelectionRange(sel1.length, selPos);
        doc.scrollTop = ss;
    }
    return false;
}

Если сделать так:

Код

<form name="form_name">
<a href="#" onclick="click_bb('area_id', 'b');">BB - 1</a>
<textarea id="area_id" cols="40" rows="4"></textarea>
</form>

То всё работает как нужно, если же написать так:

Код

<form name="form_name">
<div onclick="click_bb('area_id', 'b');">BB - 1</div>
<textarea id="area_id" cols="40" rows="4"></textarea>
</form>

то в IE 6,7 срабатывает не правильно (тэги вставляются на текужее положение курсора и выделение не сохраняется)

Как можно исправить JavaScript, таким образом, что бы второй вариант работал верно?

magelan

Дата 28.4.2010, 16:35 (ссылка)

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

Загрузка ...

потерял xPath

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

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

между первым и вторым вариантом вызова click_bb нет никакой разницы.
функция тут не при чем.

давай полный код, вероятно не хватает типизациии скрипта (TYPE="text/javascript") или где-то указан еще один area_id

spamoney

Дата 29.4.2010, 08:37 (ссылка)

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

Загрузка ...

Новичок

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

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

Вот полный код:

Код

<html>
<head>
<title>BB editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script type="text/javascript">

function click_bb(aid,Tag) {
  var Open='['+Tag+']';
  var Close='[/'+Tag+']';
    if (window.attachEvent && navigator.userAgent.indexOf('Opera') === -1) {
        var doc = document.getElementById(aid);
        doc.focus();
        sel = document.selection.createRange();
        sel.text = Open+sel.text+Close;
        doc.focus();
    }    else {
        docs = document.getElementById(aid);
        var doc = docs[0];
        var ss = doc.scrollTop;
        sel1 = doc.value.substr(0, doc.selectionStart);
        sel2 = doc.value.substr(doc.selectionEnd);
        sel = doc.value.substr(doc.selectionStart,
        doc.selectionEnd - doc.selectionStart);
        var text = doc.firstChild;
        doc.value = sel1 + Open + sel + Close + sel2;
        selPos = Open.length + sel1.length + sel.length + Close.length;
        doc.setSelectionRange(sel1.length, selPos);
        doc.scrollTop = ss;
    }
    return false;
}
</script>

</head>

<body>
<form name="form_name">
<div onclick="click_bb('area_id', 'b');">BB - 1 (работает неверно)</div>
<a href="#" onclick="click_bb('area_id', 'b');">BB - 2 (работает верно)</a>
<textarea id="area_id" cols="40" rows="4">Выделите этот текст</textarea>
</form>

</body>
</html>

Интересно еще, то, что если прописать:

Код


<div onclick="click_bb('area_id', 'b');"><img src='img.gif' /></div>

то всё работает правильно...

но мне нужно именно так:

Код

<div onclick="click_bb('area_id', 'b');">Текст</div>

Это сообщение отредактировал(а) spamoney - 29.4.2010, 08:40

magelan

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

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

Загрузка ...

потерял xPath

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

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

Петрушка следующая, DIV снимает выделение, это не видно глазу, но видно дебагеру.

если тебя устроит вариант писать так:

Код


<div onmousedown="click_bb('area_id', 'b');">BB - 2 (работает верно)</div>

то проблем не будет...

снять selection с DIV в лоб, у меня не получилось, ослик вызывает событие позже, чем убивает прошлое выделение.

spamoney

Дата 29.4.2010, 11:39 (ссылка)

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

Загрузка ...

Новичок

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

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

Эх, такой бы вариант устроил, но он всё равно работает не совсем так как нужно, т.е работать должно так:

1. выделил текст

Код

текст

2. кликнул на BB код. (Результат: текст обрамился в BB код, выделение осталось)

Код

[b]текст[/b]

3. кликаешь на другой/этот же BB код, (Результат: текст обрамляется в новый BB код, выделение остаётся)

Код

[b][b]текст[/b][/b]

- так должно быть

Код

[b][/b][b]текст[/b]

- так сейчас

Цитата

DIV снимает выделение

Хм, а почему тогда если писать так:

Код

<div onclick="click_bb('area_id', 'b');"><img src='gif.gif' /></div>

то работает?

Это сообщение отредактировал(а) spamoney - 29.4.2010, 11:41

spamoney

Дата 29.4.2010, 11:57 (ссылка)

(голосов:1)

Загрузка ...

Новичок

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

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

Всё, отбой проблема решена на одном форуме предложили такое решение:

Код

<script>        
        function savesel(doc)
        {
                if(document.selection) {                
                        doc.sel = document.selection.createRange().duplicate();
                }               
        }
        function click_bb(aid,Tag) {
                var Open='['+Tag+']';
                var Close='[/'+Tag+']';
                var doc = document.getElementById(aid);
                doc.focus();
                if (window.attachEvent && navigator.userAgent.indexOf('Opera') === -1) {                                        
                        var s = doc.sel;
                        if(s){                                  
                                var l = s.text.length;
                                s.text = Open + s.text + Close;
                                s.moveEnd("character", -Close.length);
                                s.moveStart("character", -l);                                           
                                s.select();                
                        }
                }   else {                                              
                        var ss = doc.scrollTop;
                        sel1 = doc.value.substr(0, doc.selectionStart);
                        sel2 = doc.value.substr(doc.selectionEnd);
                        sel = doc.value.substr(doc.selectionStart, doc.selectionEnd - doc.selectionStart);                                              
                        doc.value = sel1 + Open + sel + Close + sel2;
                        doc.selectionStart = sel1.length + Open.length;
                        doc.selectionEnd = doc.selectionStart + sel.length;
                        doc.scrollTop = ss;                                             
                }
                return false;
        }
</script>
 
<form name="form_name">
<div onclick="click_bb('area_id', 'b');">BB - 1</div>
<textarea id="area_id" cols="40" rows="4" onselect='savesel(this)' onchange='savesel(this)' onclick='savesel(this)' onfocus='savesel(this)' onkeyup='savesel(this)'></textarea>
</form>

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