Данный скрипт направлен на улучшение пользовательского опыта
при работе в форме ответа, в том числе с мобильных устройств:

Всплывающие кнопки форматирования
при выделении фрагмента в форме ответа
https://forumupload.ru/uploads/0000/14/1c/32995/376303.gif

(скриншот 1)

Описание

Всплывающее окно появляется при выделении фрагмента текста в форме ответа и содержит все кнопки форматирования, добавленные в стандартный редактор.
При этом по умолчанию отображены только наиболее востребованные опции форматирования (см. скриншот).
Для отображения остальных кнопок следует нажать кнопку "Ещё" (значок +).

Данная возможность особенно актуальна для пользователей мобильных устройств, поскольку в большинстве случаев на таких устройствах при выделении фрагмента текста стандартные кнопки форматирования вверху формы ответа оказываются перекрыты пунктами контекстного меню ("Копировать", "Выбрать всё" и т.д.).

Как настроить список доступных опций форматирования, см. в разделе Расширенные возможности.

Установка и подключение

Установочный код: в HTML низ или HTML верх

Код:
<!-- Всплывающие кнопки форматирования © Alex_63, 2025 -->
<link rel="stylesheet" type="text/css" href="//forumstatic.ru/f/ru/bestbb/pfb.css" />
<script type="text/javascript" src="//forumstatic.ru/f/ru/bestbb/pfb.js"></script> 

Скрипт совместим с визуальным редактором сообщений.
Для корректного отображения иконок форматирования необходимо включить extra.css (Администрирование - Свой стиль) либо импортировать из него шрифт "mybb" и все правила для стандартных иконок.


Скрипт предоставляется по платной подписке, подключается автоматически при активации подписки.
Стоимость подписки:

  • бессрочная (неограниченный срок) — 2490 рублей (при установке сразу на 2 и более форумов — 1990 рублей за каждый);

  • 1 год (365 календарных дней) — 890 рублей;

  • 6 месяцев (180 календарных дней) — 490 рублей;

Перед оплатой подписки дается возможность бесплатного подключения на пробный период10 дней (однократно для одного форума).

Для активации подписки (в том числе пробного периода) обращайтесь в личные сообщения, указав адрес форума и срок подписки. Подробности установки и способов оплаты также можно уточнить в ЛС.

Оплаченные в счёт подписки (на любой период) средства после получения пользователем подписки для обозначенного форума возврату не подлежат.

За 3 дня до истечения срока подписки администраторы оповещаются всплывающим уведомлением, сообщающим о необходимости продления.

Расширенные возможности

По умолчанию всплывающее окно содержит только кнопки форматирования, добавленные в стандартный редактор FORUM.editor.
При этом часть из них скрыта, а отображены только наиболее актуальные.

Чтобы расширить список видимых по умолчанию кнопок, используйте свойство pfb.visibleButtons. Например, добавим кнопку зачёркивания:

Код:
pfb.visibleButtons.push('underline');

Или полностью переопределим список видимых кнопок:

Код:
pfb.visibleButtons = ['font', 'size', 'bold', 'italic', 'color'];

Чтобы добавить кнопку, которой нет в стандартном наборе, используйте метод pfb.addButton:

Код:
pfb.addButton(наименование, класс, опции);

наименование — то, как будет называться опция форматирования (например 'indent');
класс — то, какой класс будет присвоен активному элементу, т.е. кнопке (например 'icons-indent');
опции — объект, содержащий настройки для данной кнопки: name — текст кнопки (во всплывающей подсказке), visible — видимость кнопки по умолчанию, onclick — функция, вызываемая по клику на кнопку (строкой).

Например:

Код:
pfb.addButton('indent', 'icons-indent', {
    name: 'Красная строка',
    visible: true,
    onclick: 'smile("[indent]")'
});

Все вышеприведённые коды следует устанавливать ниже основного установочного кода, обернув в теги <script></script>.

Оформление иконок выполнено в виде иконочного шрифта (на форумах в extra.css добавлен стандартный иконочный шрифт mybb).
По аналогии с этим можно оформить и кастомные добавленные кнопки, для которых стандартных иконок не предусмотрено, например:

Код:
.icons-indent::before {
    font-family: <название вашего иконочного шрифта>; /* семейство шрифта */
    content: "\e999"; /* символ для данной иконки */
}

Иконочный шрифт из желаемых иконок можно собрать например здесь: https://icomoon.io/app/#/select

Скрипт уже используется на этом форуме, наблюдать его работу можно в форме ответа https://forumstatic.ru/img/smilies/MyBB/light/smile.gif
Обращайтесь и подключайте к себе на форум! https://forumstatic.ru/img/smilies/MyBB/light/flag.gif

Приветствуются ваши пожелания, замечания и любая другая обратная связь по поводу функционала.
Если у вас что-то не работает, сообщите об этом, указав адрес форума и используемый браузер/устройство.

Копирование исходного кода и любые модификации запрещены.


Скрипт обновляется автоматически без участия пользователя.
Актуальная версия 1.0.1 от 2 июня 2025.