Вставка HTML тегов в поле TEXTAREA
Самое главное это javaScript, который выглядит таким образом: [JavaScript]<script> function kosenkoteg(_obekt_imya, _teg_go, _teg_theend) { var area=document.getElementsByName(_obekt_imya).item(0); if (document.getSelection) { area.value=area.value.substring(0,area.selectionStart)+ _teg_go+ area.value.substring(area.selectionStart, area.selectionEnd)+ _teg_theend+ area.value.substring(area.selectionEnd,area.value.length); } else { var selectedText=document.selection.createRange().text; if (selectedText!='') { var newText=_teg_go+selectedText+_teg_theend; document.selection.createRange().text=newText; } } } </script>[/JavaScript] Теперь создаем кнопки из событиями, с помощью них и можно будет вставлять теги в поле: [HTML]<div class="panelhtml"> <input type="button" title="Жирный текст" value="b" onclick="kosenkoteg('webdeva','<b>','</b>');" style="font-weight: bold;" /> <input type="button" title="Курсив" value="i" onclick="kosenkoteg('webdeva','<i>','</i>');" style="font-style:italic;" /> <input type="button" title="Подчеркивание" value="u" onclick="kosenkoteg('webdeva','<u>','</u>');" /> <input type="button" title="Перечеркнутый" value="s" onclick="kosenkoteg('webdeva','<s>','</s>');" /> <input type="button" title="Горизонтальная линия" value="—" onclick="kosenkoteg('webdeva','<hr>','');" /> <input type="button" title="Перенос строки" value="¶" onclick="kosenkoteg('webdeva','<br>','');" /> <input type="button" title="Изображение" value="img" onclick="kosenkoteg('webdeva','<img src=\'','\' />');" /> <input type="button" title="Гиперссылка" value="Ссылка" onclick="kosenkoteg('webdeva','<a href=\'#Ваша_ссылка\'>','</a>');" /> <br /> <select onchange="if(this.value) kosenkoteg('webdeva','<span style=\'font-size:'+this.value+'pt;\'>','<\/span>');this.value=0"> <option value="0">Размер</option> <option value="8">8 pt</option> <option value="9">9 pt</option> <option value="10">10 pt</option> <option value="11">11 pt</option> <option value="12">12 pt</option> <option value="13">13 pt</option> <option value="14">14 pt</option> <option value="15">15 pt</option> <option value="16">16 pt</option> <option value="17">17 pt</option> <option value="18">18 pt</option> </select> <select onchange="if(this.value) kosenkoteg('webdeva','<span style=\'color:'+this.value+';\'>','<\/span>');this.value=0"> <option value="0">Цвет текста</option> <option value="red" style="color:red;">Красный</option> <option value="orange" style="color:orange;">Оранжевый</option> <option value="yellow" style="color:yellow;">Желтый</option> <option value="green" style="color:green;">Зеленый</option> <option value="blue" style="color:blue;">Голубой</option> <option value="gray" style="color:gray;">Серый</option> <option value="#1874CD" style="color:#1874CD;">DodgerBlue</option> <option value="RGB(139, 69, 19)" style="color:RGB(139, 69, 19);">SaddleBrown</option> </select> <select onchange="if(this.value) kosenkoteg('webdeva','<span style=\'font-family:'+this.value+';\'>','<\/span>');this.value=0"> <option value="0">Шрифт</option> <option value="Arial">Arial</option> <option value="Cursive">Cursive</option> <option value="Fixedsys">Fixedsys</option> <option value="Geneva">Geneva</option> <option value="Georgia">Georgia</option> <option value="Sans-serif">Sans-serif</option> <option value="monospace">Monospace</option> </select> <select onchange="if(this.value) kosenkoteg('webdeva','<div style=\'text-align:'+this.value+';\'>','<\/div>');this.value=0"> <option value="0" selected="selected">Выровнять: </option> <option value="left">left</option> <option value="right">right</option> <option value="center">center</option> <option value="justify">justify</option> </select> </div>[/HTML] Не забудьте добавить форму, в которой и будете форматировать свой текст: [HTML]<textarea name="webdeva" style="width:50%;height:200px;margin:5px;">Текст в форме</textarea>[/HTML] Для удобности и красоты так же добавьте не много стилей, вы можете их изменять как вам будет лучше и удобней: [CSS] .panelhtml{ background:#ccc; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin:5px; text-align:center; width:50%; }[/CSS]
|
Категория: 
Опубликовал: 
Используемый код:
Web-сайт автора: 
Автор: |
СКАЧАТЬ
Размер файла: 2.1 Kb
Посмотреть |
Комменты
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
