| Главная » Файлы » Прочие скрипты » Яваскрипты |
Создание простой функции для вставки 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> Всё! | |
| Просмотров: 721 | Загрузок: 0 | Комментарии: 2 | | |
| Всего комментариев: 2 | |
|
| |
