На днях я тут понял, что вводить при наборе статьи все html-теги вручную как-то не очень удобно, да и к тому же в IWE появилось множество специальных тегов, которые и не запомнишь. Решил сделать так же, как и на форуме, чтобы нужно было выделить текст и нажать на кнопку, чтобы в начале выделенного текста появился открывающий тег, а в конце, соответственно, закрывающий. Порылся я в Интернете, нашел кучу неработающих вариантов реализации этой идеи. Стал искать на забугорных форумах и нашел скрипт, который работал, но только до тех пор, пока я его не приделал к форме. Немного переделал и получилось вот что:
Javascript:
function insert_tag(formName,startTag,endTag){
var el=document.getElementById(formName);
el.focus();
if (el.selectionStart==null){
var rng=document.selection.createRange();
rng.text=startTag+rng.text+endTag
}else{
el.value=el.value.substring(0,el.selectionStart)
+startTag+el.value.substring(el.selectionStart,el.selectionEnd)
+endTag+el.value.substring(el.selectionEnd);
}
}
formName ― это id поля, в которое будет вставляться тег (нужно для того, чтобы на одной странице могло находится несколько независимых форм), startTag ― это открывающий тег (например, <b>
, а endTag ― закрывающий (например, </b>. Эту же функцию можно использовать и для одинарных тегов (без закрывающего), для этого значение endTag должно быть пустым (например, insert_tag('formname','[tag]','')). Правда, в случае, если пользователь кликнет по кнопке с одинарным тегом, выделив предварительно текст, то тег будет вставлен перед выделенным фрагментом теста, а не вместо него.
Сама форма:
<form>
<div style="cursor:default;padding-bottom:10px;">
<button type="button" class="tag-button" id="button-bold" onclick="insertTag('message-text','<b>','</b>')"></button>
<button type="button" class="tag-button" id="button-italic" onclick="insertTag('message-text','<i>','</i>')"></button>
<button type="button" class="tag-button" id="button-underlined" onclick="insertTag('message-text','<u>','</u>')"></button>
</div>
<textarea id="message-text" name="some-form-name" style="width:100%;height:300px;"></textarea>
<input type="submit" value="Отправить!">
</form>
«type="button"» в этом коде нужно для того, чтобы форма не отправлялась по нажатию на эту кнопку, а классы и id'ы на кнопках делают их более красивыми, но об этом чуть дальше.
CSS:
.tag-button {
width:22px;
height:22px;
border:1px solid #a8a8a8;
cursor: default;
}
.tag-button:hover {
border:1px solid #c5c5c5;
}
.tag-button#button-bold{
background: #d2d2d2 url('bold.png') center center no-repeat;
}
.tag-button#button-bold:hover{
background: white url('bold.png') center center no-repeat;
}
Здесь однократно указывается стиль для всех кнопок вместе взятых, а затем для каждой по отдельности указывается background.
Благодаря такому несложному скрипту писать статьи стало несколько проще и удобнее. 
