Добавляем форматирование текста в форму для комментариев
Итак, у меня уже есть простейшая форма комментариев со смайлами. Добавим еще в нее возможность выделения текста жирным. Можно добавить любое форматирование, но для того чтобы было проще я покажу как это делается на 1 примере. Будем делать текст Ж – жирным. Пользователь выделяет текст в комментарии, нажмает Ж - вставляются необходимые теги, и потом этот кусок комментария становится жирным.
Для этого
напишем кнопочку которая будет все это делать
<input onclick=”insertTag (‘comment’,’[Ж]‘,’[/Ж]‘)” type=”button” value=”Ж” />
(Спонсор поста ювелирные украшения для девочек. (Дожил ))
Как видно, при нажатии на кнопочку вызывается функция insertTag в которую передаются 3 параметра: имя формы, открывающий и закрывающий теги. Ну и соответственно функция insertTag:
<script type=”text/javascript”>
function insertTag (_obj_name, _tag_start, _tag_end)
{
var area=document.getElementsByName (_obj_name).item (0);
if (document.getSelection)
{
area.value=area.value.substring (0,area.selectionStart)+_tag_start+area.value.substring (area.selectionStart, area.selectionEnd)+_tag_end+ area.value.substring (area.selectionEnd,area.value.length);
}
else
{ var selectedText=document.selection.createRange ().text;
if (selectedText!=”)
{ var newText=_tag_start+selectedText+_tag_end;
document.selection.createRange ().text=newText;
}
}
}
</script>
Здесь обработка идет для эксплорера и других видов браузеров отдельно, поскольку они по разному относятся к выделениям.
А далее в процессе обработки текста отправленной формы будем менять “тэги” на нормальные с помощью str_replace (php).
Ввесь файл:
<script type=”text/javascript”>
function insertTag (_obj_name, _tag_start, _tag_end)
{
var area=document.getElementsByName (_obj_name).item (0);
if (document.getSelection)
{
area.value=area.value.substring (0,area.selectionStart)+_tag_start+area.value.substring (area.selectionStart, area.selectionEnd)+_tag_end+ area.value.substring (area.selectionEnd,area.value.length);
}
else
{ var selectedText=document.selection.createRange ().text;
if (selectedText!=”)
{ var newText=_tag_start+selectedText+_tag_end;
document.selection.createRange ().text=newText;
}
}
}
</script>
<div style=”display:none;” id=”smiles”><img src=_.html#8221;smile/1.gif” onClick=”document.forms[0].comment.value+=’:-|’”>
<img src=_.html#8221;smile/2.gif” onClick=”document.forms[0].comment.value+=’;-)’”>
<img src=_.html#8221;smile/3.gif” onClick=”document.forms[0].comment.value+=’:-)’”>
<img src=_.html#8221;smile/4.gif” onClick=”document.forms[0].comment.value+=’8-)’”></div>
<div><img src=_.html#8221;smile/1.gif” onClick=”document.getElementById (‘smiles’).style.display=’block’”>
<input type=”button” value=”Ж” onClick=”insertTag (‘comment’,’[Ж]‘,’[/Ж]‘)”></div><br>
<form method=”post” action=”obr.php” name=”forma”>
<textarea name=”comment”></textarea><br>
<input type=”submit” value=”Отправить”>
</form>
<?php
$array1=array (“:-|”,”;-)”,”:-)”,”8-)”,”[Ж]“,”[/Ж]“);
$array2=array (“<img src=_.html#8217;smile/1.gif’>”,”<img src=_.html#8217;smile/2.gif’>”,”<img src=_.html#8217;smile/3.gif’>”,”<img src=_.html#8217;smile/4.gif’>”,”<b>”,”</b>”);/вот здесь вставляю теги на которые меняю
$allcomments=file (“allcomments.txt”);
foreach ($allcomments as $v){
$v=str_replace ($array1,$array2,$v);
echo $v.”<br><hr>”;
}
?>
Все это в робочем состоянии можно видеть здесь.