Как добавить css-класс ТОЛЬКО в визуальном редакторе Битрикса?

Чтобы добавить CSS-класс только в визуальном редакторе Bitrix, вам потребуется использовать некоторые JavaScript-коды и манипуляции с HTML-структурой элементов. Вот пошаговое руководство о том, как это сделать:

Шаг 1: Определение CSS-класса
Сначала вам нужно определить CSS-класс, который вы хотите добавить только для визуального редактора. Допустим, вы хотите добавить класс "editor-only-class". Убедитесь, что этот класс уже определен в файле стилей (CSS) вашего сайта.

Шаг 2: Инжектирование CSS-класса
Далее вам нужно внедрить этот CSS-класс в контент, который редактируется визуальным редактором. Для этого вы можете использовать JavaScript-код, который будет добавлять этот класс к элементам при загрузке страницы.

Допустим, вы хотите добавить класс только к элементам с классом "editor-only-element". Вот код JavaScript, который вы можете использовать для этой цели:

// Проверяем, что визуальный редактор активен
if (typeof(BX) !== 'undefined' && typeof(BX.htmlEditor) !== 'undefined' && typeof(BX.htmlEditor.Get)) {
    var editorCode = ''; // Замените это значение на код редактора (например, 'IBLOCK_DESCRIPTION')

    // Получаем объект редактора
    var editorObj = BX.htmlEditor.Get(editorCode);

    // Проверяем, что редактор найден
    if (editorObj && editorObj.publicEditor && editorObj.publicEditor.content) {
        // Получаем HTML-код из редактора
        var html = editorObj.publicEditor.content;

        // Создаем временный контейнер для HTML
        var tempContainer = document.createElement('div');

        // Устанавливаем HTML-код в контейнер
        tempContainer.innerHTML = html;

        // Получаем все элементы с классом "editor-only-element"
        var elements = tempContainer.querySelectorAll('.editor-only-element');

        // Добавляем класс "editor-only-class" для каждого элемента
        Array.prototype.forEach.call(elements, function(element) {
            element.classList.add('editor-only-class');
        });

        // Обновляем HTML-код в редакторе
        editorObj.publicEditor.content = tempContainer.innerHTML;
    }
}

Примечание: замените 'IBLOCK_DESCRIPTION' в коде выше на код вашего редактора для соответствующего элемента на вашей странице.

Шаг 3: Применение стилей
Теперь, если вы добавили класс "editor-only-class" в редакторе, вы можете добавить соответствующие стили в ваш CSS-файл:

.editor-only-class {
    /* CSS-стили, применяемые только в редакторе */
}

После выполнения всех этих шагов, визуальный редактор Bitrix применит класс "editor-only-class" только к элементам с классом "editor-only-element" при редактировании контента. Это позволит вам устанавливать специальные стили, которые будут видны только визуальному редактору, сохраняя общий вид вашего сайта без этих стилей.