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

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

30 сентября 2014 2442 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