Editor de texto enriquecido y BBcode
Breve descripción general
El Editor de texto enriquecido te permite diseñar el texto dentro de una burbuja o ShoutOut y añadir énfasis, personalización, colores personalizados, imágenes, vídeos, hipervínculos, entre otros.
Casos de uso
Algunos ejemplos de cómo se puede utilizar el Editor de texto enriquecido incluyen:
- Diseñar un globo como mensaje de error
- Dar la bienvenida a un usuario recurrente a tu sitio por su nombre
- Brindar a los usuarios las opciones de iniciar otros Smart Walk-Thrus directamente en el texto del globo
Cómo funciona
El Editor de texto enriquecido (RTE) facilita la aplicación de BBCode para cambiar cosas como el tamaño de fuente, el color y el estilo, y añadir hipervínculos, vídeos, imágenes o texto dinámico. Usar las herramientas del RTE aplicará este BBCode. También puedes acceder a la visualización de la Fuente para escribir en BBCode tú mismo o abrir la consola CSS para obtener más opciones de edición.
Después de crear el contenido de WalkMe, vuelve al menú de opciones para realizar los cambios deseados en la apariencia y el comportamiento de ese elemento individual. Haz clic en el elemento (Paso o ShoutOut) para editarlo. El Editor de texto enriquecido se encuentra en la pestaña Interacción, en el menú de ajustes de ese elemento específico.
https://support.walkme.com/knowledge-base/options-menu/
Diseño del Editor de texto enriquecido
El Editor de texto enriquecido se divide en 4 secciones:
- Campos de título y descripción de la burbuja a la izquierda
- Vista previa de la burbuja a la derecha
- Hay dos modos de previsualización de la burbuja:
- Visual: esta es la opción predeterminada que visualizará cualquier texto de BBCode en la burbuja. Se tiene en cuenta el CSS personalizado.
- Origen: utiliza esta opción para ver lo que sucede tras bambalinas.
- Hay dos modos de previsualización de la burbuja:
- Las funciones de personalización del Editor de texto enriquecido en la parte superior
- Consola de personalización de CSS
- ¡Edita plantillas avanzadas y personalízalas! Selecciona un elemento en la Vista previa para encontrar la línea relevante en el CS.
Opciones de personalización
A continuación se muestra una lista de opciones de personalización:
Fuente
Para utilizar los formatos de personalización de fuentes, selecciona el texto deseado y haz clic en el icono asociado.
- Negrita
- Cursiva
- Subrayar
- Color de fuente
- Tamaño de fuente
- Alineación de texto
Insertar
- Texto dinámico
- Enlace a elementos de WalkMe
- Añade un enlace que inicie un elemento de WalkMe (Walk-Thru/Smart Walk-Thru/Recurso/Encuesta) cuando se haga clic. Cuando el usuario final haga clic en el contenido de WalkMe al que se ha vinculado, se cerrará el contenido original con el que estaba interactuando anteriormente.
- Imagen
- Introduce la URL de la imagen (las imágenes deben alojarse en línea antes de poder insertarlas). Las imágenes que WalkMe utiliza para los clientes se almacenan en los servidores de Amazon S3;
- El ancho y la altura de la imagen se ajustan automáticamente al tamaño de la burbuja o del ShoutOut, manteniendo la relación de aspecto de la imagen original.
- Puedes ajustar el ancho y la altura de la imagen si es necesario haciendo doble clic en la imagen para editar;
- Puedes eliminar la imagen haciendo clic en el icono de la papelera junto a la URL de la imagen, utilizando la tecla retroceso o la de eliminar mientras editas el texto en el editor.
- Enlace
- Introduce la URL
- Vídeo
- Los servidores compatibles incluyen YouTube, Vimeo, Wistia, Ustream y Vidyard.
- Introduce la URL del vídeo en la plataforma de vídeo correspondiente. Los vídeos se pueden reproducir desde cualquier plataforma siempre que estén en formato MP4 y que utilicen un iFrame (consulta el BBCode en la tabla siguiente). Introduce el ancho y alto, si es necesario.
- iFrame
- Introduce la URL y las dimensiones de escala opcionales
BBCode
Los botones del Editor de texto enriquecido te permiten formatear el texto fácilmente. Cuando resaltas texto, WalkMe aplica el BBCode al texto. Si deseas ver el BBCode insertado utilizando el Editor de texto enriquecido, consulta la visualización de su Fuente.
Si deseas añadir BBCode tú mismo, en lugar de utilizar las funciones de WalkMe, puedes encontrar ejemplos de BBCode en la tabla a continuación.
| Función | BBCode |
|---|---|
| Texto en negrita | [b]text[/b] |
| Texto en cursiva | [i]text[/i] |
| Texto subrayado | [u]text[/u] |
| Color de fuente | [color=#hex_color]texto[/color] |
| Tamaño de fuente | [size=size_in_px]texto[/size] |
| Insertar imagen | [img]img_URL[/img] Con ancho y alto: [img=widthxheight]img_URL[/], por ejemplo: [img=40x24]img_URL[/img] |
| Insertar enlace | abrir en la pestaña actual: [url=URL_address target="_self"]texto[/url] abrir en una nueva pestaña: [url=URL_address target="_blank"]texto[/url] |
| Insertar vídeo |
[youtube]youtube_video_id[/youtube] *Para garantizar que un vídeo se inicie automáticamente, añade autoplay="1" al BBCode de apertura: [youtube height="" width="" autoplay="1"]XXXXX[/youtube] [vimeo]vimeo_video_id[/vimeo] [wistia]wistia_video_id[/wistia] [html5video]video_URL[/html5video] [ustream]ustream_video_id[/ustream] [vidyard]vidyard_video_id[/vidyard] Con ancho y alto (ejemplo de YouTube): [youtube width=”width”, height=”height”]youtube_video_id[/] o [iframe]www.url.com[/iframe] |
| Alinear texto a la izquierda | [div style="text-align:left"]texto[/div] |
| Alinear texto al centro | [div style="text-align:center"]texto[/div] |
A continuación se muestran ejemplos de BBCode que se pueden utilizar en la vista de código fuente, pero que no tienen un ícono para la generación automática.
| Función | BBCode |
|---|---|
| Alinear texto en el centro | [div style="text-align:center"]texto[/div] |
| Tachar | [s]text[/s] |
| Tablas | [table]{rows}[/table] |
| Filas de tabla | [tr]{cells}[/tr] |
| Celdas de contenido de tabla | Celda de encabezado: [th]{content}[/th] Celda de contenido: [td]{content}[/td] |
| Enlace al correo electrónico | [url=mailto:name@company .com]nombre@empresa.com[/url] |
| Propósito | Código | Ejemplo | Otros comentarios |
| Redirigir a un SWT, Redirigir a un recurso, Redirigir a una encuesta |
[swt=xxxxx]Haz clic aquí[/swt] [resource=xxxxx]Haz clic aquí[/resource] [survey=xxxxx]Haz clic aquí[/survey] |
[swt=67485]Haz clic aquí[/swt] |
swt=xxxxx debe utilizarse solo para aplicaciones que no sean SWT Para conectar un SWT a otro, se debe utilizar un activador y luego añadir un paso "Conectarse a SWT" debajo de ese activador (véase a continuación) |
| Redirigir de SWT a un paso/SWT | [trg=xxxxx]Haz clic aquí[/trg] | [trg=1]Haz clic aquí[/trg] | El número del activador debe ser único |
| Añadir texto dinámico |
[wm-data]xxxxx[/wm-data] [var]xxxxx[/var] [jquery]xxxxx[/jquery] [cookie]xxxxx[/cookie] |
[wm-data]key123[/wm-data] [var]variable123[/var] [jquery]jquery123[/jquery] [cookie]cookie123[/cookie] |
CSS
Vídeos de consejos del martes
Conceptos básicos de BBCode: consejos y trucos.
Cómo personalizar botones con BBCode
Cómo animar botones utilizando CSS
Abrir el miniménú de preguntas frecuentes Antes de utilizar una página de soporte
Minimenús para la interacción
Botones CSS personalizados
Notas técnicas
- Cuando se presiona Intro en el Editor de texto enriquecido, las etiquetas div se añaden automáticamente al BBcode. Para evitar que se añadan etiquetas div redundantes y que puedan anular la CSS, utiliza la pantalla de edición de BBCode para escribir el texto, en lugar de hacerlo en el cuadro de vista previa (el Editor de texto enriquecido de ShoutOut/el menú de opciones de una burbuja de Smart Walk-Thru).
- Al marcar texto en un globo y vincularlo a otro contenido o enlaces externos en un Smart Walk-Thru, el texto se convierte en un activador para el globo y se muestra en el mapa como tal. Si se añade estilo al texto vinculado, es posible que se distorsione el nombre del activador y se muestren algunas de las etiquetas de estilo. Recomendamos mantener las etiquetas de estilo fuera de las del desencadenador ([trg]), dejando estas últimas lo más cerca posible al texto realmente visible.