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

30 сентября 2014 Антон Кулешов 1476 0

В этой статье я расскажу о написанном мною 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_номер (атрибут). Атрибутов можно указывать любое количество, меняя их номер. Так же я предусмотрел, чтобы можно было менять и их очередность, изменяя расположение атрибутов в списке.

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

О том, как скачать видео с Ютуба и Вк

27 января 2016 Антон Кулешов

Оставим ненадолго серьёзные темы аутентификаций через социальные сети и сегодня я расскажу об очень приятном сервисе, который позволяет скачивать аудио и видео контент там, где это невозможно стандартными методами. Кнопка скачать попросту отсутствует на Ютубе, ВКонтакте, Фейсбук и куче других популярных сервисов. Конечно, продвинутый пользователь может скачать видео или аудио стандартными средствами браузера, но это сложно.

Как расшарить 3G модем по сети

23 июля 2014 ti1schweiger

Широкополосный интернет давно не редкость, но до сих пор существуют места куда он не добрался, а мобильная связь существует. За последнее время мобильные операторы солидно повысили стабильность и скорость работы 3G интернета, потому данная статья будет посвящена тому, как интернет с «триджика» раздать всем пользователям сети.

Файл «robots.txt» – версия Яндекс

3 июля 2015 ti1schweiger

Всем добра! Возможно, сегодня я не скажу ничего нового, и вся изложенная ниже информация находится в свободном доступе в Помощи Яндекса, но, как показывает практика, очень мало людей ею пользуется, да и вообще задумывается о её существовании. Поэтому, дабы развеять сумрак над тем, что же все-таки должно быть написано в robots.txt, я приведу здесь материалы из Помощи Яндекса со своими личными комментариями.