Обзор элемента Rich Text - помощь Webflow
Используйте элемент Rich Text (RTE) для создания длинного контента.
Элемент Rich Text (RTE) — это идеальный элемент для создания длинного контента, такого как посты в блогах, страницы "О нас", биографии и т.д. Вместо добавления отдельных заголовков, абзацев, списков или изображений, вы можете дважды щелкнуть по элементу Rich Text, чтобы создать и форматировать текст, пользовательский код и медиаэлементы.
Как добавить элемент Rich Text на ваш сайт
Вы можете добавить элемент Rich Text, перетащив его из панели добавления (A) на холст Дизайнера. Чтобы добавить или отредактировать содержимое, дважды щелкните элемент Rich Text или выберите элемент и нажмите Enter или Return на клавиатуре.
Вы можете добавить следующие элементы внутри элементов Rich Text:
- Абзацы
- Заголовки (H1-H6)
- Изображения
- Подписи к изображениям
- Атрибуты alt изображений
- Пользовательский код
- Цитаты
- Ненумерованные списки (с маркерами)
- Нумерованные списки
- Видео (YouTube, Vimeo)
- Богатый медиа-контент (Google карты, SoundCloud, Imgur, Giphy, Codepen и др.)
Вы также можете добавить дополнительное форматирование к текстовым элементам:
- Ссылки (URL, страница, email и т.д.)
- Жирный текст
- Курсив
- Верхний и нижний индексы
- Код
Команды с косой чертой
Когда вы редактируете содержимое внутри RTE, вы можете использовать команды с косой чертой, чтобы быстро создавать текст с помощью Webflow AI Assistant или добавлять новые элементы контента. Чтобы использовать команды с косой чертой, нажмите / (косая черта) на клавиатуре и выберите Создать больше текста, чтобы добавить контекстно-релевантный текст с помощью AI Assistant, выберите нужный элемент из меню добавления или начните вводить текст, чтобы отфильтровать список элементов:
- Заголовок (H1–H6)
- Нумерованный список
- Список с маркерами
- Абзац
- Цитата
- Изображение
- Видео
- Богатый контент
- Встраивание HTML
- Блок кода
Как добавить и форматировать текстовый контент
Вы можете начать печатать в RTE, а затем добавить форматирование текста, чтобы создать заголовки, блоки цитат, жирный или курсивный текст, верхние или нижние индексы и ссылки.
Создание текстового контента с помощью Webflow AI Assistant
Чтобы быстро добавить контекстно-релевантный текст в RTE с помощью AI Assistant:
- Щелкните правой кнопкой мыши по RTE
- Выберите Изменить текст в контекстном меню
- (Опционально) Введите подсказку, описывающую текст, который вы хотите создать
- Нажмите на значок "Отправить подсказку"
- Нажмите Готово, чтобы принять сгенерированный текст
Узнайте больше о том, как использовать Webflow AI Assistant для создания и редактирования контента.
Как добавить абзацы
Как и в любом другом текстовом редакторе, нажатие Enter на клавиатуре создаст новый абзац на новой строке, где вы можете продолжить печатать. Чтобы добавить несколько абзацев, нажмите Enter в конце абзаца. Вы также можете использовать Webflow AI Assistant для добавления и уточнения текста.
Как добавить заголовки и блоки цитат
Чтобы создать заголовок, выберите любой текст внутри абзаца и выберите опцию заголовка (H1-H6). То же самое касается создания блоков цитат.
Как форматировать текст и добавлять ссылки
Любая часть любого текстового элемента (например, заголовки, абзацы, подписи и т.д.) может быть отформатирована с помощью жирного, курсивного, верхнего индекса, нижнего индекса и ссылок, выбрав часть текста и применив желаемые параметры форматирования. Узнайте больше о форматировании встроенного текста.
Когда вы создаете ссылку в RTE, у вас есть возможность выбрать URL, страницу, раздел страницы, электронную почту или номер телефона.
Горячие клавиши
Эти горячие клавиши помогут вам быстро форматировать содержимое с богатым текстом:
- Вставить неразрывный пробел: Shift + Space
- Вставить разрыв строки: Shift + Enter
- Жирный текст: Command + B (Control + B на Windows)
- Курсив: Command + I (Control + I на Windows)
- Вставить гиперссылку: Command + K (Control + K на Windows)
Во время редактирования в RTE вы можете использовать команду слэш (“/**”) для быстрого добавления элементов контента. Вы также можете использовать сокращения Markdown:
- Курсив:
*текст*или_текст_ - Жирный текст:
**текст**или__текст__ - Жирный и курсив:
***текст***или___текст___ - Вставить гиперссылку:
[текст ссылки](https://www.url.com) - Заголовок 1:
#+ Пробел - Заголовок 2:
##+ Пробел - Заголовок 3:
###+ Пробел - Заголовок 4:
####+ Пробел - Заголовок 5:
#####+ Пробел - Заголовок 6:
######+ Пробел - Цитата:
>+ Пробел - Маркированный список:
-+ Пробел - Нумерованный список:
1.+ Пробел
Как добавить медиа-контент, пользовательский код и списки
Когда ваш текстовый курсор находится на новой строке, появляется кнопка «плюс». Нажатие на эту кнопку открывает меню вставки с опциями для добавления изображений, видео, другого медиа-контента, пользовательского кода и маркированных или нумерованных списков.
Добавить изображения, видео и медиа-контент
Все медиа-элементы в RTE адаптивны и будут учитывать соотношение сторон контента. Поддержка видео YouTube, Vimeo и Dailymotion была улучшена для возможности указания времени начала. Вот список некоторых поддерживаемых типов медиа-контента:
- YouTube
- Vimeo
- Публикация в Instagram
- Публикация в Facebook
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Альбомы Imgur
- Карты Google
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Плейлисты и чарты Spotify
- Giphy
- SoundCloud
- И многое другое!
Настройки медиа
Каждый медиа-элемент можно настроить с помощью предустановок в настройках изображения или задать конкретное значение в пикселях или процентах, нажав на значок "гаечный ключ" на панели инструментов. Также можно добавить необязательную подпись под изображениями.
Альтернативный текст
Чтобы добавить альтернативный текст к изображениям, выберите изображение, нажмите на значок "гаечный ключ", затем введите ваш альтернативный текст. Узнайте больше о написании описательного альтернативного текста.
Как добавить пользовательский код
Меню вставки включает кнопку для добавления пользовательского кода. Вы можете использовать пользовательский код для создания таблиц и разделителей с помощью HTML, стилизации частей вашего контента с помощью CSS, расширения функциональности вашего сайта с помощью JavaScript и встраивания стороннего контента.
Шаги:
- Поместите курсор в место, куда хотите добавить код
- Нажмите на значок "плюс", чтобы открыть меню вставки, и нажмите кнопку пользовательского кода
- Добавьте ваш код
Как добавить списки
Меню вставки предлагает варианты добавления неупорядоченных (маркированных) и упорядоченных (нумерованных) списков. Вы также можете вложить или развложить списки.
- Маркированный список: используйте меню вставки или введите тире
-, за которым следует пробел. - Нумерованный список: используйте меню вставки или введите целое число, за которым следует точка и пробел.
- Вложить список: выберите элемент и нажмите Tab. Развложить: выберите и нажмите Shift + Tab.
Как добавить форматированный текст из других источников
Вы можете вставить форматированный текст с других сайтов или текстовых редакторов (например, Google Docs). Форматирование, ссылки и изображения сохранятся, если вставить их в поле форматированного текста в Дизайнере или CMS.
Как переставлять и удалять элементы
Элементы в Rich text можно переставлять с помощью перетаскивания на холсте или в Навигаторе, или с помощью горячих клавиш. Элементы можно удалить, выбрав их и нажав Backspace или Command + X (Control + X на Windows).
Как стилизовать контент RTE
Стилизация отдельных элементов внутри Rich text
Стилизуйте элементы внутри Rich text, как любой элемент Webflow: выберите на холсте, перейдите в Панель стилей, примените или создайте класс и стилизуйте.
Стилизация элементов внутри Rich text с HTML-тегами
Элементы RTE наследуют стили от HTML-тегов. Вы можете стилизовать через вложенные селекторы, ограничивая стандартные стили для RTE с тем же классом.
Шаги:
- Выберите RTE на холсте
- Присвойте RTE класс
- Выберите элемент в RTE
- Перейдите в Панель стилей (S)
- Нажмите в поле Селектор
- Выберите HTML-тег
- Нажмите Вложить селектор в “имя класса”
- Стилизуйте по желанию
Как стилизовать динамический Rich text
Элементы Rich text могут связываться с полями rich text в Коллекции. Стилизация лучше всего выполняется путем отключения, стилизации и повторного подключения — или путем применения класса, стилизации и сохранения подключения. Узнайте больше о динамическом Rich text.