Привет всем моим читателям, я рад что вы сомной. И так начнём с обещанного продолжаем делать форму с бб кодами для сайта. Сегодня я предлагаю создать файл например javaform.js, и сним вот мы и будим работать. Давайте сначала опредилимся, что нам надо от формы, основные потребности. Первым хотелось отметить - это при клике на икоку с определённым тегом, например жирный текст, будит иконка соответственно с буквой В английской, так как (BOLD) и означает жирный шрифт. Значит при клике нам необходимо вставить в форму примерно такое.
, соответственно слово вставленное между этими тегами должно выглядеть так , как вы заметили слово так выделилось. Далее, а если пользователь сначала написал какойто комментарий, а потом решил обрамить его тегом выделенным, можно просто выделить текст и вставить в начале и в конце выделенного открывающий и закрывающий тег. Полезная функция и применяется практичесски на всех движках форумов, кмс всеразличных. Две основных функции мы определили значит можно начинать программировать. Из предыдущих постов вспомним создание формы с бб кодами кто не читал рекомендую ознакомиться. Мы видели, что форма имеет определённый id идентификатор, это необходимо при работе с javascript и jquery. Вспомним, что идентификатор формы у нас id="forumform", обязательным параметром при создании такой формы учитывайте параметр name="REPLIER". Теперь смотрим что у нас получилось из предложенного условия.
Код javascript
function bbcode(form,field,v)//Создаем функцию с параматрами, первое условие, идентификатор формы, второе field идентификатор поля textarea и конечно сам тег вставки в поле
{
if (document.selection) // for IE
{
var str = document.selection.createRange().text;
document.forms[form].elements[field].focus();
var sel = document.selection.createRange();
sel.text = "[" + v + "]" + str + "[/" + v + "]";
return;
}
else if ((typeof document.forms[form].elements[field].selectionStart) != 'undefined') // for Mozilla
{
var txtarea = document.forms[form].elements[field];
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
var oldScrollTop = txtarea.scrollTop;
var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + '[' + v + ']' + s2 + '[/' + v + ']' + s3;
txtarea.selectionStart = s1.length;
txtarea.selectionEnd = s1.length + 5 + s2.length + v.length * 2;
txtarea.scrollTop = oldScrollTop;
txtarea.focus();
return;
}
else insert(form,field,'[' + v + '][/' + v + '] ');
}
function insert(form,field,what)
{
if (document.forms[form].elements[field].createTextRange)
{
document.forms[form].elements[field].focus();
document.selection.createRange().duplicate().text = what;
}
else if ((typeof document.forms[form].elements[field].selectionStart) != 'undefined') // für Mozilla
{
var tarea = document.forms[form].elements[field];
var selEnd = tarea.selectionEnd;
var txtLen = tarea.value.length;
var txtbefore = tarea.value.substring(0,selEnd);
var txtafter = tarea.value.substring(selEnd, txtLen);
var oldScrollTop = tarea.scrollTop;
tarea.value = txtbefore + what + txtafter;
tarea.selectionStart = txtbefore.length + what.length;
tarea.selectionEnd = txtbefore.length + what.length;
tarea.scrollTop = oldScrollTop;
tarea.focus();
}
else
{
document.forms[form].elements[field].value += what;
document.forms[form].elements[field].focus();
}
}
Вот такой вот простенький скрипт получился, по комментариям думаю больше ничего не надо объяснять. Смотрите предидущий пост там есть описано и прописано наглядно как прописывать ссылку для вставки. Кому лень возвращаться и вспоминать продолжу пример вставки жирного текста нужно прописать такого типа
<a href="javascript:void(0)" onclick="bbcode('идентификатор формы','идентификатор поля textarea так как в него будим вставлять код',и собственно сам тег'B');">B</a>
Здесь я думаю все понятно как это происходит, в следующей статье обязательно просмотрим остальные вставка в форму, текста выделенного, вставка ссылок, цветного текста. До встречи!