Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > нужен скрипт а'ля панель BBCode

Автор: Include 5.1.2006, 15:08

Вот така у меня трабла. Мне нужно для сайта написать Java-скрипт (я в Java не оч ). Скрипт что-то напидобие панели BBCode как здеся, только для обычных html-тегов. Пробовал разобраться в скрипте который использует этот движок - разобрался не оч.
В основном скрипт должен помещать выделенный текст в TEXTAREA в html-теги соответствующие нажотой кнопки.
Please, help smile

Автор: Innuendo 6.1.2006, 01:30

ну я не жадный...
пожалуйста.. не скажу что код полностью мой... разные коды из нета(в чатсности для ИЕ)+ доработка(для Мозиллы), и всё вместе получились теги bb code
1)Протестено IE, FireFox, Opera(на древних Операх траблы иногда)
2)Что делает:
вставляет на место курсора пару тегов (открытый+закрытый) если нет выделения, а если выделение есть, то обводит его тегами.

Вот твоя текстареа:
<textarea cols='70' rows='8' name='Post' id="tex" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="storeCaret(this);"></textarea>
ну кнопочки сам рисуешь smile

можешь кнопки, а можешь табличкой.
примерно: <input type="button" onclick = "insTxt()" onmouseover = "copyT('B')" value= "B">
это для <B>.
вот код функций:

Код


function copyT(code)
{if (typeof(document.getElementById('tex').caretPos) != 'undefined'){
if (window.getSelection) {text=window.getSelection()}
else if (document.selection) {text=document.selection.createRange().text;}
text='['+code+']'+text+'[/'+code+']'
}
else if (typeof(document.getElementById('tex').selectionStart) != 'undefined')
{
text = document.getElementById('tex').value.substring(document.getElementById('tex').selectionStart,document.getElementById('tex').selectionEnd)
text='['+code+']'+text+'[/'+code+']'
}

}

function copyTC(cl)
{if (typeof(document.getElementById('tex').caretPos) != 'undefined'){
if (window.getSelection) {text=window.getSelection()}
else if (document.selection) {text=document.selection.createRange().text;}
text='[COLOR='+cl+']'+text+'[/COLOR]'
}
else if (typeof(document.getElementById('tex').selectionStart) != 'undefined')
{
text = document.getElementById('tex').value.substring(document.getElementById('tex').selectionStart,document.getElementById('tex').selectionEnd)
text='[COLOR='+cl+']'+text+'[/COLOR]'
}

}

function storeCaret(element)
{
if (typeof(document.selection) != 'undefined' && typeof(document.selection.createRange) != 'undefined')
element.caretPos=document.selection.createRange().duplicate();
}

function insTxt()
{ var element = document.getElementById("tex")
if (!element)
return;
element.focus();
if (typeof(element.caretPos) != 'undefined')
element.caretPos.text = text;
else if (typeof(element.selectionStart) != 'undefined')
{
var newPos = element.selectionEnd + text.length;
element.value = element.value.substring(0, element.selectionStart) + text + element.value.substring(element.selectionEnd, element.value.length);
element.setSelectionRange(newPos, newPos);
}
else
element.value += text;
}

Поясняю:
insText- вставление... пишишь при нажатии на кнопку.
copyT - копирование выделения и составление стринга, пишешь при наведени на кнопку
copyTC - тоже что и copyT ,только для тегов цвета (там синтаксис бб кода чутос инной просто)
storeCaret - для текстареи, ввыши написано куда добавить.

Если тебе для быстрого ответа, то вот как выглядит он на моём форуме к примеру: http://img403.imageshack.us/img403/9361/bistr1ck.jpg
если надо, пиши в ПМ, скину весь код.

Автор: Aliance 6.2.2006, 23:24

Куда глаза только глядят…?!
http://forum.vingrad.ru/index.php?showtopic=35775

Автор: PARROT 7.2.2006, 11:10

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

Код


[url=http://vasya]вася[/url]

Сначала выводится окно сценария, куда пользователь вводит ссылку, при нажатии кнопки ОК, выводится второе окно, для описания ссылки и все это вставляется в текстареа.
Вставить не проблема, а вот вывести сценарий не получается.

Код


<td title="вставить ссылку"><a href=# class=5><script>prompt("http://");</script>Ссылка</a></td>
                 <a href=# class=5 onMouseDown=pseudoTag('[url]','[/url]'); onMouseUp=d.all.txtmes.focus(); onClick=return!1>Ссылка</a></td>

Не полумается соединить в одно целое smile

Автор: Aliance 7.2.2006, 12:51

Ты про код Sardar`а? Или про что-то другое?
Если про первое - обращайся ко мне, помогу. Я его использую в своем редакторе.

Автор: PARROT 7.2.2006, 13:25

Наверно у меня нечто другое.

Код


d=document;
function pseudoTag(t1,t2){if(d.selection){var tR=d.selection.createRange();
    var isEmpty=tR.text==''
    if(tR.parentElement().tagName!='TEXTAREA')(tR=d.all.txtmes.createTextRange()).collapse(!1);
    tR.text = t1+tR.text+t2;
    if(isEmpty)tR.move('character',-t2.length);
    tR.select();
}else d.getElementById('tA').value+=t1+t2;
}

Но нашла я этот код на нашем форуме. ХОтя все равно какой код, главное чтобы работало.

Автор: PARROT 8.2.2006, 20:19

Всем спасибо, работает. Дописали мой код:

Код


d=document;
function pseudoTag(t1,t2,t3,t4){if(d.selection){var tR=d.selection.createRange();
    var isEmpty=tR.text==''
    if(tR.parentElement().tagName!='TEXTAREA')(tR=d.all.txtmes.createTextRange()).collapse(!1);
    if (t3=='') {tR.text = t1+tR.text+t2;}
    else {tR.text = t1+t3+']'+t4+t2;}
    if(isEmpty)tR.move('character',-t2.length);
    tR.select();
}else d.getElementById('tA').value+=t1+t2;
}

function myfunc() {
         url=prompt('введите ссылку','http://');
         comm=prompt('введите описание','');
         pseudoTag('[url=','[/url]',url,comm)
        }