Панель управления BB-кодов помогает производить быструю подстановку кодов в форму ввода. Инсталлизировать её можно с помощью добавления класса .bbpanel к textarea или напрямую через Javascript.
После инсталлизации textarea будет помещена в контейнер с классом .bbpanel, а у формы этот класс будет заменен на .bbpanel-form
Разметка
<textarea class="bbpanel"></textarea>
Javascript
Данная панель полностью зависит от Javascript, по этому без его поддержки она работать не будет. По умолчанию инсталлизация происходит благодаря триггеру .bbpanel в форме, но вы можете произвести инсталлизацию и вручную с помощью создания экземпляра
класса PipUI.BBPanel(...)
Инициализация
<textarea class="input" id="myform"></textarea>
<script>
let panel = new PipUI.BBPanel('#myform');
</script>
Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object
Первый параметр - объект или строка ссылающаяся на элемент.
Второй параметр - объект опций
Опции
// Выводить в консоль отладку
debug: false
// Класс, добавляемый форме ввода при выводе панели
focusClass: 'focus'
// Класс, заменяемый класс .bbpanel в форме
formClass: 'bbpanel-form'
// Настройки появляющейся панели при выделении текста
popup: {
// Включено или выключено
enable: true
// Теги, выводимые в данной панели
format: 'b,i,u,s,|,left,center,right,|,urlAlt'
// Шаблон данной панели
template: '<div class="popup-list"></div>'
// Класс, добавляемый данной панели при выводе её на экран
activeClass: 'popup-active'
}
// Отображать стилизованные подсказки при наведении на BB-коды в панели
tooltip: true
// Функция обратного вызова срабатываемая при отображении панели
showCallback: undefined,
// Функция обратного вызова срабатываемая при скрытии панели
hideCallback: undefined
// Функция обратного вызова срабатываемая при вызове обращения к коду
callcodeCallback: undefined
// Функция обратного вызова срабатываемая при работе функции UNDO
undoCallback: undefined
// Функция обратного вызова срабатываемая при работе функции REDO
redoCallback: undefined
// Функция обратного вызова срабатываемая при изменении панели
changeCallback: undefined
// Теги выводимые в панели BB-кодов
format: 'undo,|,redo,|,b,i,u,s,|,left,center,right,|,size,color,|,spoiler,quote,code,|,img,youtube,|,urlAlt,line,|,hide'
// Максимальный размер истории запоминаемый при использовании Undo/Redo
maxHistory: 64
// Настройки кодов панели. Вы можете добавлять собственные коды или изменять существующие
// Каждый элемент должен быть стилизован на подобии остальных.
codes: {...}
// Настройки шаблонов панели
templates: {}
Методы
let bbpanel = new PipUI.BBPanel('#myform');
bbpanel.getID() // Вернет уникальный идентификатор панели
bbpanel.setOptions(object) // Изменить опции панели
bbpanel.getOptions() // Получить опции панели
bbpanel.hide(callback) // Скрыть панель
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
bbpanel.show(callback) // Показать блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
bbpanel.callCode(key, callback) // Вызвать указанный код
// Параметр callback является приоритетной функцией обратного
// вызова при вызове кода, если она задана и через опции
bbpanel.change(callback) // Обновить содержимое панели
// Параметр callback является приоритетной функцией обратного
// вызова при обновлении панели, если она задана и через опции
bbpanel.undo(callback) // Вызвать функцию undo
// Параметр callback является приоритетной функцией обратного
// вызова при шаге назад, если она задана и через опции
bbpanel.redo(callback) // Вызвать функцию redo
// Параметр callback является приоритетной функцией обратного
// вызова при шаге вперёд, если она задана и через опции
bbpanel.isOpen() // Текущее состояние панели
