Показать Меню
falbar Визуальный редактор как на Хабре

Простой визуальный редактор как на Хабре

Визуальный редактор как на Хабре

В этой статье я расскажу о написанном мною jQuery плагине, который позволяет подключить к своему проекту простой визуальный редактор, как на сайте Хабрахабр.

На просторах интернета существует множество визуальных редакторов, в частности: найти и установить себе WYSIWYG редактор проблемой не является. Но вот в чём загвоздка, не всегда необходим такой огромный функционал, а наоборот, зачастую, намного удобнее работать непосредственно с HTML кодом. Хотя такой вариант наверняка не одобрят обычные пользователи, которые далеки от знания тегов и HTML элементов.

В данной статье ваш скромный слуга представляет на суд пользователей свою интерпретацию простого визуального редактора, наиболее лаконичную на его взгляд. Если Вам понравилось мое решение или наоборот, то пишите в комментариях ниже свои мысли по данной теме.

Завершив с вводной частью, давайте подключим плагин и разберемся, как он работает. Для начала прописываем две строчки включающие файл jQuery библиотеки и скрипт самого редактора.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jqeditor.min.js" type="text/javascript"></script>

Теперь применяем метод jqEditor к нужной текстовой области.

$('#textarea').jqEditor();

После того, как мы вызвали функцию, уже можно пользоваться редактором. Изначально установлено 3 копки, а именно: жирный(b) , курсив(i), подчеркнутый(u). Нужный Вам функционал можно расширить при помощи нехитрых настроек, но для начала мы их посмотрим. В настройки по умолчанию входят 3 параметра: виды правых, левых скобок и объект с тэгами.

$('#textarea').jqEditor({

	stapleL: "<",	// левая скобка
	stapleR: ">",	// правая скобка

	tags: {			// объект с тэками

		b: "Жирный",
		i: "Курсив",
		u: "Подчеркнутый"
	}
});

Если нам необходимо добавить ещё или другие элементы, то это осуществляется вот таким путем:

tags: {
	элемент: "название"
}

К слову, название элемента не обязательно, если оно не нужно, можно указать пустую строку, таким образом, добавляются парные теги без атрибутов. Но если нам потребуются не парные элементы с атрибутами или просто добавить атрибут, то это можно осуществить вот так:

tags: {
	b: "Жирный",
	i: "Курсив",
	u: "Подчеркнутый",
	img: {
		name: "Картинка",
		pair: false,
		attr_1: "src",
		attr_2: "alt"
	}
}

У каждого тэга тоже есть свои параметры: name (имя), pair (парный или не парные) и attr_номер (атрибут). Атрибутов можно указывать любое количество, меняя их номер. Так же я предусмотрел, чтобы можно было менять и их очередность, изменяя расположение атрибутов в списке.

Думаю, скрипт получился весьма не плохим и, возможно, будет Вам полезен.

Спасибо за внимание.

Подписаться на обновления

Комментариев еще не оставлено