Archie Goodwin

Порой возникает необходимость улучшить панель кнопок редактора новости использующего HTML теги, добавив к этой панели несколько кнопок с уникальными тегами. Примером такой необходимости является подключение к сайту скрипта подсветки синтаксиса - highlight. Дело в том, что эта подсветка помимо стандартного тега code требует еще и тег pre

Синтаксис тегов кода для этой подсветки

<pre><code>
'здесь какой-то код
</code></pre>

Кроме того, никто не мешает оформить свой стиль цитат, заголовков, спойлеров, которые добавят уникальность вашему проекту и чтобы вручную по памяти каждый раз не прописывать эти теги в редакторе новости или комментария, можно сделать так чтобы это делал умный javascript, а от вас лишь требовалось нажать на соответствующую кнопочку.

Попробуем разобраться как это сделать.

Начнем с CSS. Обзовем наш тег opisanie и зададим ему свой уникальный стиль - сделаем отступ со всех сторон в пять пикселей, текст жирный и выделим его красным цветом.

<style> 
opisanie {margin:5px;font-weight:bold;color:red;} 
</style>

Теперь пропишем функцию JavaScript, которая будет "одевать" выделенный текст в текстовом поле в только что придуманный нами HTML тег opisanie. Функция обращается к текстовому полю через id, в коде ниже предполагается что id требуемого нам textarea зовется message.

<script type="text/javascript">
function clc(){ 
var el=document.getElementById("message"); 
el.focus(); 
if (el.selectionStart==null){ 
 var rng=document.selection.createRange(); 
 rng.text=""+rng.text+"" 
} 
else{ 
 el.value=el.value.substring(0,el.selectionStart)+ 
 ""+ 
 el.value.substring(el.selectionStart,el.selectionEnd)+ 
 ""+ 
 el.value.substring(el.selectionEnd); 
} 
} 
</script>

После этого остается только добавить способ инициализировать функцию тогда когда нам это нужно, лучше всего это сделать через кнопку, в которой через событие onclick вызывать прописанную выше функцию. Пример HTML кода такой кнопки:

<button class="codeButtons" title="Чтобы добавить текст описания к видео, его нужно заключить в этот тег." onclick="clc()">Описание</button>

Результаты проделанной работы могут выглядеть так: