Главная » Файлы » Прочие скрипты » Яваскрипты

Создание простой функции для вставки bb-кода
04.11.14, 00:07:09



Всем привет, С вами Дефман. В этом уроке я расскажу, как сделать простую функцию вставки bb-кода в любой textarea/input элемент с возможностью вызова каллбека после вставки

Функция довольно большая и новичкам ее будет понять трудно, поэтому я объясню каждую часть функции

Посмотрите пример работы скрипта ЗДЕСЬ

Для начала рассмотрите саму функцию:
Код
function bbcode(DOM_selector, text_before, text_after, callback)  
{
  var dom = $(DOM_selector);
  //IE
  if (document.selection)
  {
  var s = document.selection.createRange();
  if(s.text)
  {
  s.text = text_before + s.text + text_after;
  }
  else
  {
  dom.val(dom.val() + text_before + text_after);
  }
  } else
  {
  //Firefox, Safari, Opera, Chrome, etc.

  var sel =  
  {
  start: dom[0].selectionStart,
  end: dom[0].selectionEnd
  };
  dom.val(dom.val().substring(0, sel.start) + text_before + dom.val().substring(sel.start, sel.end) + text_after + dom.val().substring(sel.end, dom.val().length|0));
  }
  if (typeof callback == 'function') {
  callback();
  }
}


Теперь начнем смотреть, что это за функция и что она делает

На входе у нас подается 4 параметра: DOM_selector, text_before, text_after и callback

DOM_selector - это селектор того элемента, который мы хотим использовать в качестве поля для вставки bb-кода (пишется в CSS-стиле, например ".my-input")
text_before - текст, который будет вставляться перед выделенным текстом
text_after - текст, который будет вставляться после выделенного текста
callback - необязательный параметр, который будет вызван после вставки bb-кода (например функция предварительного просмотра сообщения)

Идем дальше. Начинаем разбирать тело функции

Условие " if (document.selection) " проверяет, используется ли браузер IE у пользователя и выполняет соответствующие функции, поддерживаемые IE.

Переменная "s" содержит выделенный текст. Если текст есть - оборачиваем его в наш bb-код, если нет - вставляем пустой bb-код.

Теперь переходим к другому условию - если у пользователя браузер НЕ IE.

В таком случае мы создаем объект sel, содержащий начало выделения (start) и конец (end). Т.к. переменная dom - массив, то нам необходимо выбрать оттуда первый элемент (нашу форму).

Дальше начинается самое тяжелое - функция вставки

dom.val().substring(0, sel.start) - вернет нам весь текст начиная с начала до начала выделения

text_before - содержит открывающий bb-код

dom.val().substring(sel.start, sel.end) - вернет нам выделенный текст

text_after - содержит закрывающий bb-код

dom.val().substring(sel.end, dom.val().length|0) - вернет нам весь оставшийся текст, идущий после выделения (не включая bb-коды)

Чтобы было легче понять, я приведу пример

Допустим у нас есть форма и в ней текст: "Я супер-крутой мега-текст и тут еще текст после меня"

Выделим "мега-текст" и получим примерно следующее: "1{Я супер-крутой }(bb-code-before)|мега-текст|(bb-code-after)2{ и тут еще текст после меня}"

Итак, 1 кавычки (1{}) - это dom.val().substring(0, sel.start)

|мега-текст| - dom.val().substring(sel.start, sel.end), который обернется в (bb-code-before)|мега-текст|(bb-code-after) с помощью выражения "text_before + dom.val().substring(sel.start, sel.end) + text_after"

2 кавычки - результат dom.val().substring(sel.end, dom.val().length|0)

Использование:
Код
<button onclick="bbcode('.selector', '[bb-code]', '[/bb-code]')"><b>BB-code</b></button>  
  <br>  
<textarea class="selector"></textarea>


Всё!
Категория: Яваскрипты | Добавил: Defman | Теги: bb-кода, Функции, простой, создание, вставки, для
Просмотров: 562 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 1.0/2
Всего комментариев: 2
0
К этой статье советовал бы прочитать и эту, кто заинтересован.

0
Спасибо, полезно! 

Имя *:
Email: