ВЫСИВИГ

Поле WYSIWYG помещает богатый текстовый редактор WordPress в собственный виджет, который вы создаете с помощью главных аддонов Виджет Строитель. Редакторы получают жирным шрифтом, курсивом, ссылками, списками и кнопкой "Добавить медиа", той же панели инструментов, которую они используют при написании сообщения. Ваш виджет получает отформатированный HTML и печатает его с помощью одного токена. Это поле для любой текстовой области, где простая Textarea сгладит форматирование.

WYSIWYG - одно из полей, которые вы можете использовать в конструкторе виджетов бесплатной версии. Бесплатный плагин включает ограниченный конструктор виджетов, а полный набор полей поставляется с Мастер Аддоны Про.

Что делает поле WYSIWYG #

• Добавляет на панель виджета в Elementor форматированный текстовый редактор, с вкладками Visual и Code и кнопкой Добавить медиа.
• Сохраняет то, что редакторы пишут как HTML.
• Печатает его через токен, например {{ member_bio }}, отфильтровано, как фильтры WordPress публикуют контент.
• Сохраняет форматирование: отображаются абзацы, жирный шрифт, курсив, ссылки, списки и заголовки.
• Принимает значение по умолчанию, которое может включать разметку, поэтому свежий виджет показывает обработанный пример.

Новое для строителя? Прочитать Обзор виджета-строителя сначала вернитесь с открытым виджетом.

Прежде чем начать #

• WordPress с установленным и активным элементом Elementor.
• Установлены и активны главные дополнения для Elementor.The руководство установки настройка обложек.
• Виджет, открытый в конструкторе виджетов Пример в этом руководстве - виджет “Team Member”: Текстовые поля для имени и роли, и поле WYSIWYG с именем member_bio за биографию.

Как добавить поле WYSIWYG #

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Добавить раздел на Содержание вкладка, например “Member”.
3. Тип wysi в поле поиска слева.
4. Драг ВЫСИВИГ в раздел Нажмите на карандаш на поле, чтобы открыть его настройки.

Объяснены варианты поля WYSIWYG #

• Этикетка: текст над редактором в Elementor, например “Bio”.Поле начинается с метки “Content”.
• Имя: уникальный идентификатор поля и название его токена Используйте только буквы, цифры и подчеркивания, например member_bio.
• Описание: подсказка, показанная под редактором в Elementor.Используйте её, чтобы установить ожидания, например “Два или три предложения.жирный шрифт, ссылки и списки - fine.”
• Значение по умолчанию: начальное содержимое. это простое текстовое поле, поэтому введите HTML самостоятельно, например абзац с a strong тег и ссылка.

Блок этикеток здесь по умолчанию включено, что вам и нужно: редактору нужна полная ширина панели.Оставить Селектор пустой, так как блок текста не является значением CSS.

Остальные Общие настройки ведут себя так же, как и в других полях, в том числе Условия если регион должен появиться только тогда, когда установлено другое поле.

В наших тестах полевая карта внутри конструктора показала значение по умолчанию как необработанный HTML в его маленьком редакторе предварительного просмотра. это только собственный предварительный просмотр конструктора. Elementor отображает то же значение по умолчанию, что и отформатированный текст.

Распечатайте содержимое в своем шаблоне #

Один жетон помещает весь регион. заверните его в контейнер, который вы можете уложить, и защитите, чтобы пустое поле не оставляло случайной обертки:

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

Стиль региона с панели CSS, ориентируясь на теги, которые пишет редактор

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

Не добавляйте raw к токену WYSIWYG. простой токен уже отображает форматирование, и raw снимает только предохранительный фильтр.

Что фильтр сохраняет и капает #

Значение проходит через тот же фильтр, который WordPress использует для содержания сообщений В наших тестах, заголовках, абзацах, strong, emсписки, ссылки и даже в Интернете style атрибуты прошли без изменений. Ан iframe был удален, а тег сценария удален без запуска.

Одна деталь, которую нужно знать перед передачей виджета клиенту: когда тег сценария был вставлен через вкладку "Код", тег был удален, но JavaScript внутри него остался на странице в виде обычного текста, поэтому строка кода появилась в середине биографии. Ничего не предупреждает вас. Скажите редакторам вставлять текст, а не вставлять, и проверьте вкладку "Код", если на странице появляются случайные символы.

Используйте элемент управления WYSIWYG в Elementor #

Добавить виджет на страницу, или перезагрузить редактор, если страница уже была открыта Поле показывает полный редактор под вашим ярлыком: Добавить медиа, Визуальные и Кодовые вкладки, формат абзаца раскрывающийся, жирным, курсивом, подчеркиванием, списками, кнопкой ссылки и полноэкранным.

Редакторы пишут так, как они делают в посте Предварительный просмотр обновляется, как только фокус покидает редактор The Код на вкладке показан базовый HTML, который удобен для очистки вставленного форматирования.

Вот готовая карта на лицевой стороне, жирная фраза, ссылка и список - все это с поля:

Обычные случаи использования #

• Биографии членов команды и авторские поля.
• Описания функций или услуг, которым нужен список или жирная фраза.
• Тела отзывов с цитатой и строкой атрибуции.
• Любая длинная текстовая область в виджете карты, коробки или панели.

Советы по работе с полем WYSIWYG #

• Дайте ему значение по умолчанию с реальной наценкой. Затем редакторы видят, какой контент ожидает регион, и вы знаете, как отображается форматирование.
• Установите длину в Описание. “Два или три предложения” сохраняет множество исправлений макета позже.
• Стиль тегов, а не текста. Правила для p, a и ul внутри вашего класса оберток сохраняйте согласованность региона, что пишут редакторы.
• Защитите жетон {% if %} так что пустое поле не оставляет на странице пустой обертки.
• Только обычный текст? The Поле Textarea легче. Для вставной разметки или встраивания фрагментов используйте Поле кода.

Часто задаваемые вопросы #

Завершая #

Бросьте поле WYSIWYG в раздел "Содержимое", дайте ему четкую метку, полезное описание и значение по умолчанию с реальной разметкой, а затем распечатайте токен внутри раздела {% if %} охранять и стилизовать теги из CSS панели. редакторы получают панель инструментов, которые они уже знают, и ваш виджет получает чистый отформатированный HTML. для обычного текста используйте Поле Textareaдля вставленных фрагментов Поле кодаи проверьте ценообразование за то, что включает каждый план.