Как создать спойлер в редакторе TinyMCE?

    Сергей Гусев
    16.06.2026
    0 Комментариев
    Способ структурирования контента в визуальных редакторах СЭО 3KL.

    Вопрос:

    Как в редакторе «TinyMCE» спрятать часть текста под спойлер?

    Решение:

    За создание и работу спойлеров в тексте визуальных редакторов СЭО 3KL отвечает плагин фильтра «Обработка спойлеров» (filter_otspoiler).
    В наборе инструментов редактора «Atto» для этого предусмотрена специальная кнопка «Спойлер», а в редакторах «TinyMCE» и «Простой текст» нужно «обернуть» текст спойлера специальным тегом.

    Для создания спойлера в редакторе «TinyMCE» необходимо:

    1) В окне редактора с подготовленным текстом перейти к виду отображения «Исходный код» (Рис. 1).

    Рис. 1. Пример окна редактора. Переключение к отображению HTML-кода текста.

    2) В открывшемся модальном окне «Исходный код» (режиме HTML-верстки) каждый фрагмент текста, который должен уйти под спойлер, ограничить открывающим тегом <div class="otspoiler"> (вставить перед фрагментом текста) и закрывающим тегом </div> (вставить после фрагмента текста) (Рис. 2).

    Рис. 2. Пример выделения текста под спойлер тегами.

    3) Сохранить редактирование.

    Результат:

    Теперь, при включенном в курсе фильтре «Обработка спойлеров», размеченные таким образом фрагменты текста будут скрыты под спойлерами «>Показать» (поз. 1 Рис. 3) и станут доступны пользователям (раскроются) при нажатии на спойлер (поз. 2 Рис. 3).

    Рис. 3. Пример контента с применением фильтра «Обработка спойлеров».

    Если фильтр выключить — весь текст будет отображаться полностью, без дополнительной разметки и спойлеров (Рис. 4).

    Рис. 4. Пример контента в курсе. Фильтр «Обработка спойлеров» отключен.
    Аналогичным способом (см. 2)) можно создать спойлеры и в текстовом редакторе «Простой текст». При этом, в качестве формата отображения текста в редакторе должен быть выбран «Формат HTML» (Рис. 5).

    Рис. 5. Пример окна редактора «Простой текст».

    -Перейти к статье «Фильтры в СЭО 3KL»-

    Теги: контент
    ☆ ☆ ☆ ☆ ☆
    Рейтинг ответа: 0 (0 оценок)

    Комментарии запрещены