Современный BB редактор комментариев для uCoz

Введение

Стандартный BB редактор комментариев в uCoz свою задачу выполняет, но по ощущениям он застрял где то в прошлом. Много визуального мусора, странные отступы, кнопки выглядят как элементы админки из нулевых, а писать комментарий не особо приятно.

При этом сам движок uCoz позволяет аккуратно и без костылей привести редактор в порядок. Ниже решение, которое полностью обновляет внешний вид и удобство BB редактора, не ломая его логику и не трогая ядро системы. Только стили и JavaScript. Классика. Надежно. По старым правилам, но с современным результатом.

Что в итоге получится

После установки редактор начинает выглядеть как нормальный интерфейс, а не как обязательное зло.

Что именно меняется

• BB кнопки становятся аккуратными кнопками с иконками
• панель управления собирается в один логичный блок
• смайлы переезжают в эту же панель
• исчезают лишние переносы строк и системные обертки
• поле ввода становится удобным для чтения и набора текста

По факту пользователь просто пишет комментарий и не думает о том, как выглядит форма.

Как это работает

Скрипт обрабатывает уже готовую форму комментариев, которую генерирует uCoz, и аккуратно приводит ее в порядок.

Основные шаги

• стандартные input элементы BB кодов заменяются на button
• текст на кнопках заменяется на иконки
• блок со смайлами перемещается в панель BB кодов
• удаляется визуальный мусор, мешающий flex верстке
• вся панель собирается в современный flex контейнер

Важно. Логика BB кодов остается стандартной. Все работает так же, как и раньше, только выглядит и ощущается лучше.

Установка

Установка максимально простая и занимает пару минут.

Порядок действий

• зайдите в панель управления сайтом uCoz
• откройте раздел Управление дизайном
• выберите модуль с комментариями
• откройте шаблон формы добавления комментариев
• прокрутите шаблон в самый низ
• вставьте код целиком
• сохраните изменения

Если форма комментариев стандартная, никаких дополнительных действий не потребуется.

Код для установки

Код вставляется целиком, без изменений и сокращений.

<style>
/* Основной контейнер */
.comm-form-body {
 display: flex;
 flex-direction: column;
 gap: 15px;
}

/* Панель управления */
.ucf-bb {
 background: #ffffff;
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 padding: 8px 12px;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 min-height: 40px;
}

/* Разделитель */
.bb-divider {
 width: 1px;
 height: 20px;
 background: #e2e8f0;
 margin: 0 4px;
}

/* Кнопки BB */
.ucf-bb .codeButtons {
 background: #ffffff !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 8px !important;
 color: #475569 !important;
 height: 32px !important;
 min-width: 32px;
 padding: 0 8px !important;
 font-size: 13px !important;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 margin: 0 !important;
}

.ucf-bb .codeButtons:hover {
 background: #f8fafc !important;
 border-color: #cbd5e1 !important;
}

/* Смайлы */
.smiles-grid {
 display: flex !important;
 align-items: center;
 gap: 8px;
 margin: 0 !important;
}

.smiles-grid a img {
 width: 20px;
 height: 20px;
 display: block;
 transition: transform 0.1s;
}

.smiles-grid a:hover img {
 transform: scale(1.2);
}

#allSmiles a {
 text-decoration: none;
 font-size: 18px;
 font-weight: bold;
 color: #3b82f6;
 line-height: 1;
}

/* Поле ввода */
.comm-form-input {
 width: 100%;
 box-sizing: border-box;
 border: 1px solid #e2e8f0 !important;
 border-radius: 12px !important;
 padding: 15px !important;
 font-size: 15px;
 line-height: 1.6;
 min-height: 150px;
 outline: none;
 transition: border-color 0.2s;
}

.comm-form-input:focus {
 border-color: #3b82f6 !important;
}

/* Очистка мусора */
.ucf-bb br,
.comm-form-field > br,
.smiles-grid br { display: none !important; }

.ucf-bb span[id^="bc"] { display: contents !important; }
</style>

<script>
(function() {
 const iconMap = {
 'b': '<b>B</b>',
 'i': '<i>I</i>',
 'u': '<u>U</u>',
 'http://': '🔗',
 '@': '✉️',
 'img': '🖼️',
 'list': '•≡',
 'hide': '🔒',
 'All codes': '⚙️',
 '/': '✕'
 };

 const bb = document.querySelector('.ucf-bb');
 const smiles = document.querySelector('.smiles-grid');
 if (!bb) return;

 bb.querySelectorAll('.codeButtons').forEach(el => {
 el.removeAttribute('style');
 if (el.id === 'cdl') el.value = '◀';
 if (el.id === 'cdc') el.value = '◀▶';
 if (el.id === 'cdr') el.value = '▶';

 if (el.tagName === 'INPUT') {
 const newBtn = document.createElement('button');
 newBtn.type = 'button';
 newBtn.className = el.className;
 newBtn.title = el.title;
 newBtn.id = el.id;
 newBtn.onclick = el.onclick;
 newBtn.innerHTML = iconMap[el.value] || el.value;
 el.replaceWith(newBtn);
 }
 });

 if (smiles) {
 const divider = document.createElement('div');
 divider.className = 'bb-divider';
 bb.appendChild(divider);
 bb.appendChild(smiles);

 const plus = smiles.querySelector('#allSmiles a');
 if (plus) plus.innerHTML = '+';
 }

 bb.querySelectorAll('span[id^="bc"]').forEach(s => {
 if (!s.querySelector('.codeButtons')) s.remove();
 });
})();
</script>

Почему это решение действительно удачное

Если без маркетинга и приукрашивания.

• ничего не ломает
• легко поддерживается
• не конфликтует с обновлениями
• выглядит современно
• улучшает пользовательский опыт

Это тот случай, когда улучшение реально ощущается, а не просто красиво выглядит на скриншоте.

Заключение

uCoz всегда был про гибкость. Этот BB редактор наглядный пример того, как стандартный функционал можно привести в порядок без переписывания системы и без лишней магии.

Один раз установили и забыли. Комментарии стали удобными, аккуратными и не вызывают раздражения ни у пользователей, ни у администраторов. Именно так и должен выглядеть редактор комментариев в 2025 году.