Виджет Rich Text

Содержание

Добавьте заголовки в ваш документ, чтобы сгенерировать содержание.

Виджет Rich Text позволяет гибко управлять текстовым и графическим контентом, как в обычном текстовом редакторе. С его помощью вы можете добавлять и форматировать разные типы текстового и медиа контента — заголовки, списки, ссылки, цитаты, картинки, видео и т.д.

Виджет хорошо подходит для больших объемов текста, например, для статей или описаний товаров.

Виджет Rich Text

Лимит символов в Rich Text — 30 000, этого хватит для длинной статьи, лонгрида или гайдлайна.

В виджет 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 Ctrl + Enter	Shift + Enter Cmd + 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-параметры: альтернативный текст и название.

Настройки для картинки в виджете Rich Text

2. Видео

Нажмите кнопку Видео, далее Заменить видео и выберите в поп-апе нужный видео-файл.

Видео можно добавить только на тарифах Team или Business.

Настройте параметры для видео:

Заполнение: Вмещать, Покрывать или Исходный размер.

Размер: По умолчанию, На всю ширину или Пользовательский (можно указать размер в процентах или в пикселях).

Позиционирование по отношению к тексту: сверху, снизу, слева, справа.

Параметры воспроизведения: Показать элементы управления, Без звука, Зацикленное воспроизведение, Авто-проигрывание, Полноэкранный просмотр на iOS.

Обложка: при выборе чекбокса Добавить обложку появится дополнительная кнопка Заменить изображение — кликните по ней и выберите нужную картинку для обложки.

Настройки для видео в виджете Rich Text

3. Видео со сторонних ресурсов: YouTube, Vimeo, Rutube, VK, Kinescope

Нажмите кнопку Видео по ссылке и вставьте в поп-апе нужную ссылку или код для вставки видео.

После добавления ссылки или кода в поп-апе появятся дополнительные параметры:

Размер: По умолчанию, На всю ширину или Пользовательский (можно указать размер в процентах или в пикселях).

Позиционирование по отношению к тексту: сверху, снизу, слева, справа.

Параметры воспроизведения: Без звука, Зацикленное воспроизведение, Авто-проигрывание, Полноэкранный просмотр на iOS.

Настройки для видео со сторонних ресурсов в виджете Rich Text

Использование Rich Text в коллекциях

Если вы используете в проекте коллекции и динамические страницы, то с помощью виджета Rich Text вы можете удобно форматировать контент. Это особенно полезно для блогов, новостных сайтов и каталогов товаров и услуг, где каждый текст требует индивидуального форматирования.

Как добавить виджет Rich Text в коллекцию

1. Перейдите в раздел Коллекции, выберите нужную коллекцию и создайте в ней поле с типом Форматированный текст (Rich Text).

Добавляем в коллекцию поле Форматированный текст

2. Перейдите на нужную страницу проекта (например, динамическую страницу коллекции) и добавьте виджет Rich Text на холст.

Добавили на страницу виджет Rich Text

3. Привяжите к виджету Rich Text созданное поле коллекции с типом Форматированный текст.

Для этого перейдите в Настройки на правой панели и в поле Динамические данные выберите нужное поле.

Привязываем созданное поле коллекции к виджету

Готово! Теперь вы можете управлять контентом виджета Rich Text прямо из таблицы с элементами коллекции. Это особенно удобно для клиентов — любой менеджер сможет редактировать и форматировать контент через CMS, даже не переходя к страницам сайта.

Как редактировать контент виджета Rich Text в коллекции

Вы можете управлять контентом виджета Rich Text, который добавлен на страницу коллекции, через таблицу записей коллекции.

Для этого перейдите в раздел Коллекции, откройте нужную коллекцию и кликните на нужную запись таблицы.

Кликаем на нужную запись в таблице коллекции

В открывшемся поп-апе найдите поле типа Форматированный текст , которое вы добавили ранее, — здесь вы можете добавить нужный текст и медиа-контент и настроить форматирование.

Редактируем и форматируем контент в таблице коллекции

Все изменения, сделанные в таблице коллекции, автоматически применятся к виджету Rich Text и отобразятся на странице коллекции.

Отформатированный контент автоматически отображается на странице коллекции