# Панель BB-кодов

## Общая информация <a href="#general-information" id="general-information"></a>

Панель управления BB-кодов помогает производить быструю подстановку кодов в форму ввода. Инсталлизировать её можно с помощью добавления класса <mark style="color:orange;">`.bbpanel`</mark> к <mark style="color:orange;">`textarea`</mark> или напрямую через Javascript.

{% hint style="warning" %}
После инсталлизации textarea будет помещена в контейнер с классом <mark style="color:orange;">`.bbpanel`</mark>, а у формы этот класс будет заменен на <mark style="color:orange;">`.bbpanel-form`</mark>
{% endhint %}

### Разметка

```html
<textarea class="bbpanel"></textarea>
```

{% embed url="<https://codepen.io/pipui/pen/GRYgQVX>" %}
Пример работы кода выше
{% endembed %}

## Javascript

Данная панель полностью зависит от Javascript, по этому без его поддержки она работать не будет. По умолчанию инсталлизация происходит благодаря триггеру .bbpanel в форме, но вы можете произвести инсталлизацию и вручную с помощью создания экземпляра\
класса <mark style="color:orange;">`PipUI.BBPanel(...)`</mark>

### Инициализация

```html
<textarea class="input" id="myform"></textarea>

<script>
    let panel = new PipUI.BBPanel('#myform');
</script>
```

{% embed url="<https://codepen.io/pipui/pen/dygPmod>" %}
Пример работы кода выше
{% endembed %}

Конструктор данного класса поддерживает 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: {}
```

### Методы

```javascript
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() // Текущее состояние панели
```

### События

| Триггер                | Описание                                          | Инициатор     |
| ---------------------- | ------------------------------------------------- | ------------- |
| hide-bbpanel-pipui     | Срабатывает при скрытии панели BB-кодов           | .bbpanel-form |
| show-bbpanel-pipui     | Срабатывает при отображении панели BB-кодов       | .bbpanel-form |
| change-bbpanel-pipui   | Срабатывает при изменении панели                  | .bbpanel-form |
| callcode-bbpanel-pipui | Срабатывает при вызове какого-либо кода из панели | .bbpanel-form |
| undo-bbpanel-pipui     | Срабатывает при вызове функции шага назад         | .bbpanel-form |
| redo-bbpanel-pipui     | Срабатывает при вызове функции шага вперёд        | .bbpanel-form |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/bb-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.