Редактор HTML-тегов на JS
Редактор HTML-тегов на JS
Пусть это и не ново, но в данной статья я расскажу, каким образом реализована вставка BB-кодов в <textarea> на различных форумах и гостевых книгах. Также этот подход можно приспособить для того, чтобы написать редактор HTML-тегов, например для CMS при создании новой записи, чтобы можно было быстро, если понадобиться, обрамить текст в нужные теги. Понятное дело, это не визуальный редактор (WYSIWYG) и надо знать хоть чуть-чуть HTML. Я не особо люблю визуальные редакторы, т.к всё равно они оставляют много ненужного мусора в коде и тормознуто работают.
Для написания такого редактора, нам традиционно понадобиться помощь Javascript, в частности метод «document.getSelection» (для нормальных браузеров, читай не IE) и свойство «document.selection.createRange().text». Вызывая метод document.getSelection(), мы можем получить информацию о позиции курсора вначале выделения текста и его конце, что позволяет всегда точно выделить нужный кусок кода и вернуть его на место, предварительно обрамив HTML-тегом.
При помощи document.selection.createRange().text мы можем как читать (get), так и устанавливать (set) значение выделенного текста на странице.
Для того чтобы управлять логикой и содержимым для вставки нужного текста воспользуемся также стандартными функциями объекта window — prompt (позволяет ввести текст в спец. окно) и confirm (окно подтверждения, т.е «Ок» или «Отмена»). Перед началом работы, также, необходимо перевести фокус на поле ввода при помощи метода focus() у этого элемента формы. Для нашего будущего HTML-редактора мы также реализуем следующие функции:
вставка введенного имени тега в виде открывающего и закрывающего элемента (<TAG></TAG>)
вставка гиперссылки с дополнительными аттрибутами (<A>)
обработка нескольких строк для вставки списка (<OL> или <UL>)
Все остальные, необходимые вам, функции можете дописать сами по аналогии. Готовый код редактора вместе с комментариями приведен ниже:
<script type="text/javascript">
function HTML_edit( action )
{
area = document.getElementById('textfield'); // получаем объект поля ввода
area.focus(); // перед началом работы переводим фокус на текстарею (иначе в IE не будет работать)
// получаем выделенный текст и подготавливаем его к обработке
if( document.getSelection )
{
document.getSelection();
avalue = area.value;
sel_length = avalue.length;
sel_start = area.selectionStart;
sel_end = area.selectionEnd;
left_side_text = avalue.substring(0, sel_start);
selected_text = avalue.substring(sel_start, sel_end);
right_side_text = avalue.substring(sel_end, sel_length);
}
// для остальных браузеров (IE), не понимающих работу с «выделениями», приведенную выше
else if( document.selection ) selected_text = document.selection.createRange().text;
// обрабатываем выделенный текст на основе переданного аргумента action
switch( action )
{
// простая вставка любого тега
case 'custom_tag':
tagname = prompt('Введите название HTML-тега', '');
if( tagname )
{
prefix = '<'+ tagname +'>';
suffix = '</'+ tagname +'>';
}
break;
// вставка ссылки
case 'hyperlink':
if( !selected_text ) selected_text = prompt('Введите текст ссылки', '');
if( selected_text )
{
if( selected_text.match(/^http:\/\/|www/) ) {
url = selected_text;
selected_text = prompt('Введите текст ссылки', url) || '';
}
else url = prompt('Введите адрес ссылки', '') || '';
url = 'http://' + url.replace(/^\w+:\/\//, '');
title = prompt('Введите описание ссылки (title)', '') || '';
indexing = confirm('Добавить элементы для запрета индексации ссылки в поисковых системах?') || '';
prefix = (indexing ? '<noindex>' : '') + '<a href="'+ url +'" title="'+ title +'" '+ (indexing ? 'rel="nofollow"' : '') +'>';
suffix = '</a>' + (indexing ? '</noindex>' : '');
}
break;
// обработка нескольких строк текста для вставки списка
case 'list':
tagname = prompt('Укажите тип списка (UL - маркерованый, OL - нумерованый)', 'ul') || '';
selected_text = selected_text.replace(/\r?\n/g, '</li>\n\t<li>');
prefix = '<'+ tagname +'>\n\t<li>';
suffix = '</li>\n</'+ tagname +'>';
break;
}
// возвращаем результаты работы функции обратно в поле ввода текста
if( prefix != null && suffix != null )
{
if( document.getSelection ) area.value = left_side_text + prefix + selected_text + suffix + right_side_text;
else if( document.selection ) document.selection.createRange().text = prefix + selected_text + suffix;
}
}
</script>
<input type="button" value="<CUSTOM TAG>" title="Вставка парного открывающего и закрывающего тега" onclick="HTML_edit('custom_tag')" />
<input type="button" value="<A HREF=..>" title="Вставка ссылки" onclick="HTML_edit('hyperlink')" />
<input type="button" value="<OL|UL> → <LI>" title="Создание списка из выделенных строк" onclick="HTML_edit('list')" />
<br />
<textarea cols="115" rows="15" wrap="off" id="textfield"></textarea>
|
| Категория: Разное | Добавил: Admin (12.10.2010)
|
| Просмотров: 3318 | Рейтинг: 5.0/1
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
