Редактор HTML-тегов на JS - Каталог статей - Уроки по html/css - Разное www.Sefirut.ru - разработка шаблонов, сайтов, иконок, скриптов, создание сайтов набережные челны, студия веб-дизайна в Набережных Челнах, раскрутка и продвижение сайтов в интернете
| Сегодня Суббота 10.12.2016

Редактор 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="&lt;CUSTOM TAG>" title="Вставка парного открывающего и закрывающего тега" onclick="HTML_edit('custom_tag')" />

<input type="button" value="&lt;A HREF=..>" title="Вставка ссылки" onclick="HTML_edit('hyperlink')" />

<input type="button" value="&lt;OL|UL> &rarr; &lt;LI>" title="Создание списка из выделенных строк" onclick="HTML_edit('list')" />

<br />

<textarea cols="115" rows="15" wrap="off" id="textfield"></textarea>
Категория: Разное | Добавил: Admin (12.10.2010)
Просмотров: 2006 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]