CustomToolbar - andreyryabin/sprint.editor GitHub Wiki
Предварительные действия
- Сделайте файл с пользовательскими настройками, например local/admin/sprint.editor/settings/mysite.php
- Сделайте файл со стилями local/admin/sprint.editor/settings/mysite.css (имя css-файла должно быть таким же как и у файла с настройками, чтобы он подключился автоматически)
- Подключите файл с настройками к редактору (в свойстве инфоблока или highload-блока)
Задавайте произвольные стили кнопками, начиная с версии редактора 4.0.0 каждая кнопка имеет свой css-класс с именем блока в названии sp-x-btn-БЛОК
.sp-x-btn.sp-x-btn-text {
background: #0b65c3;
color: #fff;
width: 100px;
}
.sp-x-btn.sp-x-btn-image {
background: #995aca;
color: #fff;
width: 100px;
}Результат
Сделайте иконки блоков и укажите их в параметре button, он полностью заменит html-содержимое кнопки
$settings = array(
'title' => 'Пример настройки',
'block_configs' => [
'lists' => [
'button' => 'Список<br/><img height="30px" src="/local/admin/sprint.editor/settings/icons/lists.png">',
],
'htag' => [
'button' => 'Заголовок<br/><img height="30px" src="/local/admin/sprint.editor/settings/icons/htag.png">',
],
],
);Результат
$settings = array(
'title' => 'Пример настройки',
'block_configs' => [
'lists' => [
'button' => 'Список<br/><img height="30px" src="/local/admin/sprint.editor/settings/icons/lists.png">',
],
'htag' => [
'button' => 'Заголовок<br/><img height="30px" src="/local/admin/sprint.editor/settings/icons/htag.png">',
],
],
'block_toolbar' => [
[
'title' => 'Блоки1',
'blocks' => [
'htag',
'lists',
],
],
[
'title' => 'Блоки2',
'blocks' => [
'image',
'text',
],
],
],
);Результат
