CustomStylesInTextBlock - andreyryabin/sprint.editor GitHub Wiki

Подключаем список стилей в текстовом блоке с редактором trumbowyg.

В стандартном текстовом блоке подключен визуальный редактор trumbowyg

Selection_021.png

Можно сделать для него выпадающий список стилей, чтобы получить любое оформление текста, например такое

Selection_022.png

  1. Сделайте файл с пользовательскими настройками, например local/admin/sprint.editor/settings/text-styles.php

с содержимым


$settings = [
    'title' => 'local/text-styles.php',
    'block_settings' => [
        'text' => [
            'csslist' => [
                'type'  => 'hidden',
                'value' => [
                    'sp-text-1' => 'Стиль 1',
                    'sp-text-2' => 'Стиль 2',
                    'sp-text-3' => 'Стиль 3',
                ],
            ],
        ],
    ],
];


  1. Положите рядом css-файл в котором задано нужно оформление для css-классов local/admin/sprint.editor/settings/text-styles.css
.sp-text-1 {
    background: #a55;
    color: #fff;

}

.sp-text-2 {
    background: #5a5;
    color: #fff;
}

.sp-text-3 {
    background: #55a;
    color: #fff;
}


  1. Подключите файл настроек к свойству с редактором

Selection_023.png

Selection_024.png

  1. Сохраните свойство редактора и обновите страницу на которой редактировали элемент

в админке у текстового блока появится выпадающий список стилей, которым можно украсить ваш текст

  1. файл со стилями local/admin/sprint.editor/settings/text-styles.css автоматически подключается только в админке редактора, в публичной части подключите его в ручную, например в шаблоне сайта так
\Bitrix\Main\Page\Asset::getInstance()->addCss('/local/admin/sprint.editor/settings/text-styles.css');

или так

$APPLICATION->SetAdditionalCSS('/local/admin/sprint.editor/settings/text-styles.css');

или так

<link href="/local/admin/sprint.editor/settings/text-styles.css" rel="stylesheet" />

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

  1. сделать копию текстового блока, положив его в папку /local/admin/sprint.editor/blocks/text/ и править его на усвое усмотрение

  2. Заменить его на любой другой визуальный редактор, например ckeditor https://github.com/andreyryabin/sprint.editor/wiki/CkeditorInTextBlock

  3. Сделать свой блок https://github.com/andreyryabin/sprint.editor/wiki/CustomBlocks