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