Кнопки для вставки тегов в textarea на javascript

На днях я тут понял, что вводить при наборе статьи все 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.

Благодаря такому несложному скрипту писать статьи стало несколько проще и удобнее. Улыбка


05.08.2011, 16:55
Просмотров: 1727.
9