WYSIWYG

El Campo WYSIWYG coloca el editor TinyMCE completo, el mismo editor de texto enriquecido que WordPress ha enviado durante años, en un panel de widget personalizado. Los editores obtienen negrita, cursiva, listas, enlaces, encabezados y el cambio de pestaña visual/textual que ya conocen. Su widget recibe HTML formateado listo para imprimir. Dentro de los complementos maestros Creador de widgets, este es el campo para regiones de contenido donde es simple Área de texto aplanaría el formato del texto.

El campo WYSIWYG es compatible Condiciones como cualquier otro control, y su contenido se representa a través del Motor de plantilla de sintaxis de ramita. Los valores WYSIWYG mantienen su HTML seguro automáticamente, por lo que rara vez los necesita |raw filtro. Ambas guías explican los detalles y limitaciones.

La conexión es un token. Imprimir {{ your_field_name }} en el panel HTML y las representaciones de marcado almacenadas allí, filtradas wp_kses_post, por lo que el formato sobrevive mientras se eliminan las etiquetas inseguras. Sin filtros adicionales, sin escapar de la gimnasia.

Qué hace el campo WYSIWYG #

• Representa el editor de texto enriquecido TinyMCE en el panel Elementor del widget, con las pestañas Visual y Texto.
• Almacena la salida del editor como una cadena HTML.
• Imprime ese HTML {{ your_field_name }}, pasó por wp_kses_post en salida.
• Mantiene el formato intacto: párrafos, negrita, cursiva, listas, enlaces y encabezados, todos renderizados.
• Admite valores dinámicos, por lo que el contenido puede provenir de etiquetas dinámicas donde la configuración los proporciona.

¿primer widget? El Descripción general del creador de widgets cubre los conceptos básicos del editor sobre los que se basa esta página.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget de tarjeta de miembro del equipo con un campo WYSIWYG llamado member_bio sosteniendo la biografía formateada de cada persona.

Cómo agregar un campo WYSIWYG #

Arrastra el WYSIWYG campo desde el panel de campos a una sección debajo del Contenido tab, el hogar natural para contenido de formato largo. Sus opciones se abren a la izquierda una vez que aterriza.

Explicación de las opciones de campo WYSIWYG #

La lista de opciones sigue siendo pequeña porque el propio editor tiene la complejidad:

• Etiqueta: el texto que se muestra encima del editor en Elementor, por ejemplo “Member Bio”.
• Nombre: el identificador único al que se refieren sus plantillas. Sólo letras, números y guiones bajos, por ejemplo member_bio.
• Predeterminado: el contenido inicial, y puede incluir marcado. Un breve párrafo formateado muestra a los editores para qué sirve la región y demuestra que el formato funciona.
• Dinámico: el campo acepta valores dinámicos, por lo que el contenido se puede conectar a etiquetas dinámicas en lugar de escribirlo a mano.

Conecte el campo WYSIWYG con su token #

El campo WYSIWYG es un campo de token. Un token en el panel HTML coloca toda la región de contenido:

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

En la salida, el valor pasa wp_kses_post, el filtro WordPress se aplica al contenido de la publicación. Las etiquetas que produce TinyMCE, párrafos, fuertes y em, listas, enlaces, encabezados, imágenes, están todas en la lista permitida, por lo que el formato de los editores es lo que representa. Cualquier cosa insegura que se cuela a través de la pestaña Texto, como a <script>, este dezbracat.

Ai grijă: no agregar |raw a un token WYSIWYG por costumbre. El token simple ya representa el formato, porque wp_kses_post permite el marcado que escribe TinyMCE; |raw sólo retira el filtro de seguridad sin cambiar el aspecto de una biografía normal. Si la salida parece escapada en lugar de renderizada, la causa está en otra parte, no falta un filtro.

Envuelva el token en un contenedor con una clase, como en el ejemplo, y diseñe la región desde el panel CSS:

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

Utilice el control WYSIWYG en Elementor #

Agregue su widget personalizado a una página en Elementor o recargue el editor si la página ya estaba abierta. El campo se representa como un editor TinyMCE completo en el panel: barra de herramientas en la parte superior, pestañas Visuales y de Texto en la esquina, Agregar medios donde la configuración lo permita.

Los editores escriben y formatean exactamente como lo harían en una publicación: seleccione texto, negrita, agregue un enlace, inicie una lista. La vista previa se actualiza a medida que escriben, mostrando el contenido diseñado por el CSS del widget.

Cuando una biografía se representa de manera extraña, verifique la pestaña Texto antes de culpar al widget. El contenido pegado de Word o Google Docs a menudo incluye tramos perdidos y estilos en línea, y todos son visibles allí. Limpiar el marcado en la pestaña Texto generalmente corrige el diseño en el acto.

Casos de uso comunes #

• Biografías y perfiles en widgets de equipo, autor y altavoz.
• Descripciones largas en tarjetas de servicio, producto y característica donde un encabezado o lista pertenece dentro del texto.
• Cuerpos testimoniales eso necesita énfasis y saltos de línea preservados.
• Notas a pie de página y exenciones de responsabilidad con enlaces en línea a políticas.
• Cualquier región de texto editada por el cliente donde el formato es importante y el cliente nunca debería ver HTML.

Consejos para trabajar con el campo WYSIWYG #

• Imprima el token simple. {{ member_bio }} renderiza el formato tal cual; |raw agrega riesgo sin agregar capacidad aquí.
• Estilo a través de una clase envolvente. Objetivo .tm-bio p, .tm-bio ul, y amigos en el panel CSS en lugar de esperar que la salida del editor llegue prediseñada.
• Establezca un valor predeterminado formateado. Una biografía con un nombre en negrita y un enlace también sirve como ejemplo en vivo de lo que admite el campo.
• Un WYSIWYG por región de contenido. Proporcione los campos separados de introducción y letra pequeña en lugar de pedir a los editores que administren ambos dentro de un solo editor.
• Elige el campo más ligero cuando puedas. Una sola línea sin formato pertenece a un campo Texto; busque WYSIWYG cuando los párrafos, listas o enlaces sean realmente parte del contenido.
• Espere kses en la salida. Las etiquetas personalizadas fuera de la lista permitida posterior al contenido no sobrevivirán, por diseño. Los fragmentos sin procesar pegables son los Campo de código's trabajo.

Preguntas frecuentes #

Envolviendo #

El campo WYSIWYG de Widget Builder brinda a los editores la experiencia de escritura que ya conocen y le brinda un único token desinfectado para colocar en el marcado. Las personas con contenido formatean biografías y descripciones visualmente; el widget los representa de forma segura y los diseña a través de su propio CSS. Para fragmentos sin formato pegables, utilice el Campo de código, y para repetir bloques formateados combine WYSIWYG con Campo repetidor. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.