ВЫСИВИГ

The Поле WYSIWYG опускает полный редактор TinyMCE, тот же богатый редактор WordPress поставляется годами, в пользовательскую панель виджета. редакторы получают жирным шрифтом, курсивом, списками, ссылками, заголовками, и визуальный/текстовый переключатель вкладок, которые они уже знают. ваш виджет получает отформатированный HTML готов к печати. Внутри главных аддонов Виджет Строитель, это поле для областей контента, где равнина Текстареа это сгладит форматирование текста.

Поле WYSIWYG поддерживает Условия как и любой другой контроль, и его контент отображается через Механизм шаблонов Twig-синтаксиса. Значения WYSIWYG автоматически сохраняют свой безопасный HTML, поэтому вам редко нужен |raw фильтр. Оба руководства объясняют детали и ограничения.

Соединение - один токен.Печать {{ your_field_name }} на панели HTML и сохраненная там разметка отображается, фильтруется wp_kses_post, так форматирование выживает пока небезопасные теги удалены. никаких дополнительных фильтров, никакой ускользающей гимнастики.

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

• Отображает текстовый редактор TinyMCE rich в панели Elementor виджета, с вкладками Визуальный и Текстовый.
• Хранит вывод редактора в виде HTML-строки.
• Печатает этот HTML через {{ your_field_name }}прошел wp_kses_post на выходе.
• Сохраняет нетронутым форматирование: отображаются абзацы, жирный шрифт, курсив, списки, ссылки и заголовки.
• Поддерживает динамические значения, поэтому контент может поступать из динамических тегов, которые предоставляет им установка.

Первый виджет? Обзор виджета-строителя охватывает основы редактора, на которых основана эта страница.

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

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет карты члена команды с полем WYSIWYG с именем member_bio проведение отформатированной биографии каждого человека.

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

Перетащите ВЫСИВИГ поле с панели полей в раздел под Содержание таб, естественный дом для длинного контента. Его варианты открываются слева, как только он приземлится.

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

Список опций остается небольшим, поскольку сам редактор несет в себе сложность:

• Этикетка: текст, показанный над редактором в Elementor, например “Member Bio”.
• Имя: уникальный идентификатор, на который ссылаются ваши шаблоны Буквы, цифры и подчеркивания только, например member_bio.
• По умолчанию: начальный контент, и он может включать разметку Короткий отформатированный абзац показывает редакторам, для чего нужен регион, и доказывает, что форматирование работает.
• Динамический: поле принимает динамические значения, поэтому контент можно подключить к динамическим тегам, а не вводить вручную.

Подключите поле WYSIWYG своим токеном #

Поле WYSIWYG - это поле токена Один токен на панели HTML размещает всю область контента:

<article class="tm-card">
  <h3 class="tm-name">{{ member_name }}</h3>
  <div class="tm-bio">
    {{ member_bio }}
  </div>
</article>

На выходе значение проходит wp_kses_post, фильтр WordPress применяется к содержимому post.The теги TinyMCE производит, абзацы, сильный и эм, списки, ссылки, заголовки, изображения, все в разрешенном списке, так что какой формат редакторов, то и рендеры. все небезопасное, что пробирается через вкладку Текст, как a <script>, раздевается.

Осторожно: не добавлять |raw к токену WYSIWYG по привычке Простой токен уже отображает форматирование, т.к wp_kses_post позволяет разметку TinyMCE пишет; |raw только удаляет фильтр безопасности без изменения того, как выглядит нормальный био. Если выходные данные выглядят вырвавшимися, а не визуализированными, причина в другом, а не в недостающем фильтре.

Заверните токен в контейнер с классом, как в примере, и смоделируйте регион с панели CSS:

.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }

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

Добавьте свой пользовательский виджет на страницу в Elementor, или перезагрузите редактор, если страница уже была открыта, Поле отображается как полный редактор TinyMCE на панели: панель инструментов сверху, Визуальные и Текстовые вкладки в углу, Добавить медиа, где установка позволяет это.

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

Когда биография выглядит странно, проверьте вкладку Текст, прежде чем винить виджет. Контент, вставленный из Word или Google Документы часто несет в себе случайные пролеты и встроенные стили, и все они видны там. очистка разметки на вкладке Текст обычно фиксирует макет на месте.

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

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

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

• Распечатайте простой жетон. {{ member_bio }} отображает форматирование как есть; |raw добавляет риск, не добавляя сюда возможности.
• Стиль через класс оберток. Цель .tm-bio p, .tm-bio ulи друзья на панели CSS вместо того, чтобы надеяться, что выходные данные редактора будут получены в предварительном стиле.
• Установите форматированный по умолчанию. Биография с жирным названием и одной ссылкой служит живым примером того, что поддерживает эта область.
• Один WYSIWYG на регион контента. Отдайте вступление и мелкий шрифт отдельным полям вместо того, чтобы просить редакторов управлять обоими внутри одного редактора.
• Выберите более легкое поле, когда сможете. Одна неформатированная строка принадлежит текстовому полю; дойти до WYSIWYG, когда абзацы, списки или ссылки действительно являются частью контента.
• Ожидайте kses на выходе. Пользовательские теги вне списка разрешенных постконтента не выживут, по дизайну. Вставляемые необработанные фрагменты Поле кода'с работа.

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

Завершая #

Поле WIDGet Builder WYSIWYG дает редакторам опыт написания, который они уже знают, и дает вам один очищенный токен для размещения в разметке. Люди контента визуально форматируют биографии и описания; виджет безопасно отображает их и стилизует через собственный CSS. Для вставных необработанных фрагментов используйте Поле кодаа для повторения форматированных блоков объедините WYSIWYG с Поле ретранслятора. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.