Виджет Rich Text
Виджет Rich Text позволяет гибко управлять текстовым и графическим контентом, как в обычном текстовом редакторе. С его помощью вы можете добавлять и форматировать разные типы текстового и медиа контента — заголовки, списки, ссылки, цитаты, картинки, видео и т.д.
Виджет хорошо подходит для больших объемов текста, например, для статей или описаний товаров.
В виджет Rich Text нельзя вставлять другие элементы.
Как добавить виджет Rich Text
Перетащите виджет из панели Элементы на холст или просто кликните по его названию.
Как редактировать контент в виджете Rich Text
По умолчанию в виджете размещены статичные данные. Для редактирования кликните на виджет два раза — откроется поп-ап, в котором вы можете редактировать и форматировать контент.
В поп-апе вы можете работать, как в обычном текстовом редакторе — вводить, копировать и удалять текст, форматировать его, а также вставлять изображения и видео.
Возможности форматирования текста в виджете Rich Text
Для форматирования текста доступны следующие опции:
- Параграф (тег <p>) и заголовки разного уровня 1-6 (теги h1-h6)
- Базовое форматирование: Жирный, Курсив, Подчеркнутый, Зачеркнутый, Верхний / Нижний индексы
3. Ссылка
Кнопка Ссылка доступна только при выделенном тексте. Нажав на кнопку, вы можете ввести в поп-апе адрес ссылки и настроить ее открытие в новой вкладке.
4. Маркированный и нумерованный списки
5. Цитата
6. Блок кода
7. Маркдаун
Вы можете использовать разметку Markdown для форматирования текста. Например:
-
Выделение текста с двух сторон символами «**» делает его жирным.
-
Символы «---» и «***» преобразуются в горизонтальную линию-разделитель.
Горячие клавиши для редактирования и форматирования текста
Для редактирования и форматирования контента внутри виджета можно использовать стандартные горячие клавиши текстовых редакторов.
Также можно использовать контекстное меню браузера (открывается по клику правой кнопкой мыши).
При вставке текста из других редакторов форматирование частично или полностью сохраняется — это зависит от источника.
В виджете Rich Text доступны следующие горячие клавиши:
Базовые
|
Команда |
Windows/Linux |
macOS |
|---|---|---|
|
Копировать |
Ctrl + C |
Cmd + C |
|
Вырезать |
Ctrl + X |
Cmd + X |
|
Вставить |
Ctrl + V |
Cmd + V |
|
Вставить без форматирования |
Ctrl + Shift + V |
Cmd + Shift + V |
|
Отменить |
Ctrl + Z |
Cmd + Z |
|
Повторить |
Ctrl + Shift + Z |
Cmd + Shift + Z |
|
Добавить разрыв строки |
Shift + Enter |
Shift + Enter |
Форматирование текста
|
Команда |
Windows/Linux |
macOS |
|---|---|---|
|
Полужирный |
Ctrl + B |
Cmd + B |
|
Курсив |
Ctrl + I |
Cmd + I |
|
Подчеркнутый |
Ctrl + U |
Cmd + U |
|
Зачеркнутый |
Ctrl + Shift + S |
Cmd + Shift + S |
Форматирование абзаца
|
Команда |
Windows/Linux |
macOS |
|---|---|---|
|
Применить обычный стиль текста |
Ctrl + Alt + 0 |
Cmd + Alt + 0 |
|
Применить стиль заголовка 1 |
Ctrl + Alt + 1 |
Cmd + Alt + 1 |
|
Применить стиль заголовка 2 |
Ctrl + Alt + 2 |
Cmd + Alt + 2 |
|
Применить стиль заголовка 3 |
Ctrl + Alt + 3 |
Cmd + Alt + 3 |
|
Применить стиль заголовка 4 |
Ctrl + Alt + 4 |
Cmd + Alt + 4 |
|
Применить стиль заголовка 5 |
Ctrl + Alt + 5 |
Cmd + Alt + 5 |
|
Применить стиль заголовка 6 |
Ctrl + Alt + 6 |
Cmd + Alt + 6 |
|
Нумерованный список |
Ctrl + Shift + 7 |
Cmd + Shift + 7 |
|
Маркированный список |
Ctrl + Shift + 8 |
Cmd + Shift + 8 |
|
Цитата |
Ctrl + Shift + B |
Cmd + Shift + B |
|
Блок кода |
Ctrl + Alt + C |
Cmd + Alt + C |
|
Нижний индекс |
Ctrl + , |
Cmd + , |
|
Верхний индекс |
Ctrl + . |
Cmd + . |
Выделение текста
|
Команда |
Windows/Linux |
macOS |
|---|---|---|
|
Выделить все |
Ctrl + A |
Cmd + A |
|
Расширить выделение на один символ влево |
Shift + ← |
Shift + ← |
|
Расширить выделение на один символ вправо |
Shift + → |
Shift + → |
|
Расширить выделение на одну строку вверх |
Shift + ↑ |
Shift + ↑ |
|
Расширить выделение на одну строку вниз |
Shift + ↓ |
Shift + ↓ |
Добавление медиа-контента в виджет Rich Text
Вы можете добавить в виджет:
1. Картинку
Нажмите кнопку Изображение, далее Выбрать изображение и выберите в поп-апе нужную картинку.
Настройте параметры для картинки:
- Размер: По умолчанию, На всю ширину или Пользовательский (можно указать размер в процентах или в пикселях).
- Позиционирование по отношению к тексту: сверху, снизу, обтекание справа или слева.
- Переход по ссылке: вы можете добавить ссылку для перехода по клику на изображение.
- SEO-параметры: альтернативный текст и название.
2. Видео
Нажмите кнопку Видео, далее Заменить видео и выберите в поп-апе нужный видео-файл.
Видео можно добавить только на тарифах Team Pro или Hosting Basic.
Настройте параметры для видео:
- Заполнение: Вмещать, Покрывать или Исходный размер.
- Размер: По умолчанию, На всю ширину или Пользовательский (можно указать размер в процентах или в пикселях).
- Позиционирование по отношению к тексту: сверху, снизу, слева, справа.
- Параметры воспроизведения: Показать элементы управления, Без звука, Зацикленное воспроизведение, Авто-проигрывание, Полноэкранный просмотр на iOS.
- Обложка: при выборе чекбокса Добавить обложку появится дополнительная кнопка Заменить изображение — кликните по ней и выберите нужную картинку для обложки.
3. Видео со сторонних ресурсов: YouTube, Vimeo, Rutube, VK, Kinescope
Нажмите кнопку Видео по ссылке и вставьте в поп-апе нужную ссылку или код для вставки видео.
После добавления ссылки или кода в поп-апе появятся дополнительные параметры:
- Размер: По умолчанию, На всю ширину или Пользовательский (можно указать размер в процентах или в пикселях).
- Позиционирование по отношению к тексту: сверху, снизу, слева, справа.
- Параметры воспроизведения: Без звука, Зацикленное воспроизведение, Авто-проигрывание, Полноэкранный просмотр на iOS.
Использование Rich Text в коллекциях
Если вы используете в проекте коллекции и динамические страницы, то с помощью виджета Rich Text вы можете удобно форматировать контент. Это особенно полезно для блогов, новостных сайтов и каталогов товаров и услуг, где каждый текст требует индивидуального форматирования.
Как добавить виджет Rich Text в коллекцию
1. Перейдите в раздел Коллекции, выберите нужную коллекцию и создайте в ней поле с типом Форматированный текст (Rich Text).
2. Перейдите на нужную страницу проекта (например, динамическую страницу коллекции) и добавьте виджет Rich Text на холст.
3. Привяжите к виджету Rich Text созданное поле коллекции с типом Форматированный текст.
Для этого перейдите в Настройки на правой панели и в поле Динамические данные выберите нужное поле.
Готово! Теперь вы можете управлять контентом виджета Rich Text прямо из таблицы с элементами коллекции. Это особенно удобно для клиентов — любой менеджер сможет редактировать и форматировать контент через CMS, даже не переходя к страницам сайта.
Как редактировать контент виджета Rich Text в коллекции
Вы можете управлять контентом виджета Rich Text, который добавлен на страницу коллекции, через таблицу записей коллекции.
Для этого перейдите в раздел Коллекции, откройте нужную коллекцию и кликните на нужную запись таблицы.
В открывшемся поп-апе найдите поле типа Форматированный текст, которое вы добавили ранее, — здесь вы можете добавить нужный текст и медиа-контент и настроить форматирование.
Все изменения, сделанные в таблице коллекции, автоматически применятся к виджету Rich Text и отобразятся на странице коллекции.