Editor avanzado WYSIWYG

El editor WYSIWYG avanzado combina un diseño ligero con potentes capacidades de edición de texto enriquecido, soportando sintaxis Markdown específica. Ofrece una experiencia altamente visual e intuitiva que supera a los editores tradicionales de Markdown, pero mantiene más flexibilidad que los editores WYSIWYG.

PRECAUCIÓN

Los artículos que se han cambiado del editor Markdown o WYSIWYG al editor avanzado WYSIWYG no pueden revertirse.

Explorando el editor avanzado WYSIWYG

Usando el editor avanzado WYSIWYG

Asignación de un nombre de artículo

Cuando creas un artículo, le das un nombre. En el editor avanzado de WYSIWYG, el título del artículo aparece en la parte superior del área de contenido del artículo. Haz clic en el título para editarlo. Verás las siguientes opciones:

Sugiero título:

1. Eddy AI sugiere tres opciones de título para tu artículo. Selecciona el título deseado y edítalo según necesites.

2. Haz clic en Generar más sugerencias para ver opciones adicionales de título.

3. Usa los botones de me gusta () y "no me gusta " () para dar feedback sobre las sugerencias de Eddy AI.

URL y descripción:

1. URL: Edita la URL del artículo en este campo. Por defecto, Document360 crea la URL (también conocida como slug) basándose en el título del artículo en el momento de la creación. Por ejemplo, si el título del artículo es "¿Qué es Document360?", la URL se convierte what-is-document360en .

   NOTA

   Para más información, lee el artículo sobre Change the URL of an article.

2. Descripción: Introduce una breve descripción del artículo.

NOTA

Para editar metadatos de artículos como SEO settings, search visibility, tags, labels, related articles featured image, attachments, status indicator, , preferences, , o deprecation, haz clic en el icono de Más (⋯) en la esquina superior derecha del editor y luego selecciona Más opciones de artículo.

Puedes usar el menú de inserción rápida , el comando de barra y la sintaxis específica de Markdown para crear y editar contenido en el editor avanzado WYSIWYG.

Menú de inserción rápida

El menú de inserción rápida aparece como una opción flotante dentro de un bloque vacío. Permite a los usuarios añadir rápidamente elementos de uso común a sus artículos.

Las opciones disponibles en el menú de inserción rápida son:

• Eddy AI Writer (): Genera contenido impulsado por IA directamente en tu artículo.

• Lista de viñetas (): Inserta una lista con viñetas. Usa el desplegable para seleccionar por defecto, disco, cuadrado o círculo.

• Tabla (): Añadir una tabla a estructurar los datos.

• Imagen (): Sube e inserta una imagen.

  NOTA

  • Utiliza las herramientas disponibles para dar formato a la imagen. Haz clic en la imagen para abrir el menú de formato flotante.

  • Puedes alinear, recortar, añadir bordes, sombras, subtítulos y más.

    Para más información, lee el artículo sobre Image formatting in the Advanced WYSIWYG editor.

• Enlace (): Añadir un hipervínculo. También puedes usar el Ctrl + K atajo de teclado.

• Bloque de código (): Insertar un bloque de código para contenido técnico. Haz clic dentro del bloque de código para acceder a la barra de herramientas contextual:

  • Desplegable de idioma: Seleccione el idioma deseado

  • Copiar: Para copiar el bloque de código

• Más: Haz clic en Más para acceder a opciones de formato adicionales usando el menú Barra.

NOTA

• El menú de Inserción Rápida solo aparece cuando el bloque está vacío.

• Desaparece automáticamente cuando empiezas a escribir.

• Si limpias el contenido de un bloque, el menú de Inserción Rápida reaparece.

Empieza a escribir con Eddy AI, elige una plantilla e importa documentación

Cuando el artículo en el editor avanzado WYSIWYG esté vacío, puedes empezar a crear tu contenido usando las siguientes opciones:

un. Empieza a escribir con Eddy AI

1. Haz clic Empezar a escribir con Eddy AI.

2. Selecciona una de las opciones disponibles:

   1. Escribe un artículo

   2. Crea un esquema del artículo

   3. Crear un artículo a partir de un vídeo

   4. Crear un artículo a partir de la transcripción de medios o archivo de texto

3. Introduce el tema o prompt que quieras.

   La IA generará un borrador inicial basado en las opciones seleccionadas y las entradas proporcionadas.

NOTA

Para más información, lee el artículo sobre AI Writer.

b. Elige una plantilla

1. Haz clic en Elegir una plantilla.

   Aparecerá un panel con plantillas disponibles.

2. Selecciona la plantilla deseada y previsualiza.

3. Haz clic Usar esta plantilla para  estructurar tu artículo con contenido predefinido.

   El nombre y el slug del artículo se llenarán automáticamente usando el título de la plantilla.

NOTA

Para más información, lee el artículo sobre Templates.

C. Importe documento

1. Haz clic en Importar documento.

   Aparecerá el panel de Importación.

2. Sube un .docx archivo usando arrastrar y soltar o sube un  archivo ouna opción.

   El nombre del artículo y el slug se generarán automáticamente en función del nombre del archivo subido.

NOTA

• Las opciones Empezar a escribir con Eddy AI, Elegir una plantilla e Importar documentos aparecerán de forma destacada cuando el editor de artículos esté vacío.

• Una vez que empiezas a escribir manualmente, las opciones desaparecen.

• Si borras el contenido en el editor, estas opciones vuelven a aparecer para facilitar el acceso.

Comandos de barra

Escribe / en el editor y aparece una lista de opciones. También puedes buscar las opciones escribiendo los nombres de los comandos. Haz clic en el comando deseado o pulsa la tecla Enter para seleccionar el comando.

NOTA

Asegúrate de escribir / al principio de una línea o después de un espacio. Las opciones no aparecerán si lo escribes justo después de un personaje. Puedes navegar por cada comando y sección usando las teclas de flecha arriba, abajo, derecha e izquierda.

También puedes acceder fácilmente a Eddy AI Writer desde la parte superior del menú de barras. Además, las opciones de comando de barra se dividen en tres secciones:

NOTA

Tablas

Al seleccionar /table desde el menú con barra, aparece un submenú con una paleta en cuadrícula:

• La selección predeterminada es una 3 × 3 tabla.

• Puedes insertar hasta una 10 × 10 mesa usando la paleta.

• Usa las teclas del teclado o el ratón paramodificar la selección.

• Después de crear la tabla, puedes añadir más filas y columnas usando el icono + . Para más información, lee el Tables in Advanced WYSIWYG editorarchivo .

Divisores

Al seleccionar /divider desde el menú de barra, aparece un submenú que muestra tres estilos de separador:

• Sólido (por defecto)

• Punteado

• Dashed

Sintaxis Markdown

El editor avanzado WYSIWYG soporta una amplia gama de sintaxis Markdown; para una lista detallada, lee el artículo sobre los conceptos básicos de Markdown.

Por ejemplo, si quieres añadir un Encabezado 2, escribe la siguiente sintaxis: ## Markdown syntax. La sintaxis se renderizará y el Encabezado 2 se añadirá al instante.

NOTA

• La sintaxis Markdown solo funcionará si la escribes manualmente. No se renderizará cuando copies y pegues la sintaxis.

• Para ver la lista de sintaxis Markdown no soportadas, lea el artículo sobre Advanced WYSIWYG editor basics.

Barra de herramientas

Para cambiar el diseño o la apariencia del contenido, utiliza las opciones de formato enriquecidas del editor avanzado WYSIWYG.

Mientras editas en el editor avanzado WYSIWYG, haz clic en el icono Formatear () en el lado derecho del panel de edición.

NOTA

Seleccionando la opción Pin (), puedes anclar la barra de herramientas al lado derecho de la interfaz del editor. Cuando la barra de herramientas está fijada, el árbol de categorías permanecerá expandido mientras navegas entre artículos, facilitando el cambio entre ellos sin expandir el árbol de categorías cada vez, manteniendo la barra de herramientas de formato fijada en el editor.

En pantallas más pequeñas (por debajo de 1280 px), el árbol de categorías colapsará automáticamente cuando cambias entre artículos.

1. Estilos de texto

• Deshacer (): Para revertir la última acción.

• Rehacer (): Para volver a aplicar la última acción deshecha.

• Format painter (): Para copiar y aplicar formato de una parte del texto a otra.

• Clear (): Para eliminar todo el estilo del texto seleccionado.

• Lettercase (): Para cambiar la mayúscula del texto.

2. Encabezados

• : Para aplicar el estilo H2 (Encabezado 2) al texto seleccionado.

• : Para aplicar el estilo H3 (Encabezado 3) al texto seleccionado.

• : Para aplicar el estilo H4 (Encabezado 4) al texto seleccionado.

• Párrafo (): Para aplicar el estilo estándar de párrafo al texto seleccionado.

3. Tipografía

• Familia de fuentes: Para seleccionar la tipografía del texto.

• Tamaño de fuente: Para ajustar el tamaño del texto seleccionado.

NOTA

Cuando insertas el contenido en el editor avanzado WYSIWYG, el tipo de fuente se configurará como Verdana por defecto.

• Para cambiar la configuración de fuentes en toda tu base de conocimientos, navega hasta Configuración () en la barra de navegación izquierda.

• En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Customize site.

• Desde el desplegable de fuente del sitio , selecciona la fuente deseada.

4. Paleta

• Color de fuente: Para cambiar el color del texto seleccionado.

• Color de fondo: Para establecer un color de fondo para el texto seleccionado.

5. Formato y listas

• Negrita (): Para poner en negrita el texto seleccionado.

• Cursiva (): Para cursiva del texto seleccionado.

• Subrayar (): Subrayar el texto seleccionado.

• Tachado (): Para aplicar un tachado al texto seleccionado.

• Inline code (): Para añadir código en línea al texto.

• Alinear a la izquierda (): Para alinear el contenido del texto con el margen izquierdo.

• Centra (): Para centrar el contenido de tu texto.

• Alinear a la derecha (): Para alinear el contenido del texto con el margen derecho.

• Justificar (): Distribuir el contenido del texto de manera equitativa entre los márgenes.

• Lista de viñetas (): Para añadir una lista denotada con símbolos para cada elemento.

• Lista numerada (): Para añadir una lista denotada con numeración para cada elemento.

• Lista de numeración multinivel (): Para añadir una lista denotada con numeración multinivel para cada elemento.

• Lista de verificación (): Para añadir una lista marcada con casillas que los usuarios pueden marcar como completas o incompletas.

6. Controles

• Aumentar la sangría (): Para alejar el contenido más del margen.

• Disminuir la sangría (): Para acercar el contenido al margen.

• Subíndice (): Para bajar el texto por debajo de la línea base.

• Superíndice (): Para elevar el texto por encima de la línea base.

• Altura de línea (): Para elegir el espaciado entre las líneas.

• Espacio de letras (): Para cambiar el espaciado entre las letras.

• Salto de línea (): Para cambiar a la siguiente línea.

• Salto de página (): Para especificar dónde terminar la página actual y comenzar la siguiente página mientras exportas el contenido como PDF.

CONSEJO PROFESIONAL

Para cambiar el nivel de tu lista con viñetas o numerada, puedes usar los controles de Aumentar sangría () o Disminuir sangría () desde la barra de herramientas. Alternativamente, utiliza los atajos de teclado Tab para aumentar la sangría o Shift+Tab para disminuir la sangría.

Buscar y reemplazar

Para utilizar la función Buscar y Reemplazar en el editor avanzado WYSIWYG:

1. Haz clic en el icono de Más () en la esquina superior derecha.

2. Selecciona Buscar y reemplazar en el menú.

NOTA

Para más información, lee el artículo sobre Find and replace.

Insertando plantillas de preguntas frecuentes en el editor avanzado WYSIWYG

Para insertar plantillas de preguntas frecuentes en el editor avanzado WYSIWYG:

1. Navega hasta la ubicación deseada en el artículo.  

2. Escribe el comando /FAQs Barras y selecciona las preguntas frecuentes de la lista.

   Document360 añade tres plantillas de acordeón de preguntas frecuentes a tu artículo.

3. En las plantillas de preguntas frecuentes insertadas, puedes realizar las siguientes opciones:

   1. Configuración (): Haz clic para personalizar las plantillas de preguntas frecuentes según tus preferencias.

   2. Expandir/Colapsar (): Haz clic para expandir o colapsar los acordeones de preguntas frecuentes.

   3. Eliminar (): Haz clic para eliminar toda la sección de preguntas frecuentes.

   4. Añadir pregunta (): Haz clic entre las preguntas frecuentes para insertar preguntas frecuentes personalizadas adicionales.

NOTA

• Las plantillas de preguntas frecuentes son diferentes del generador de preguntas frecuentes con IA.

• Para más información, lee el artículo AI FAQ generator.

Vista de código ()

• Te permite ver y editar el contenido en formato de código HTML.

• Cuando cambias a la vista de código, el editor formatea automáticamente el HTML para mejorar la legibilidad. Este formato estandariza la sangría y el espaciado sin cambiar la estructura HTML subyacente.

• El formato automático se ejecuta cada vez que entras en la vista de código. Los bloques personalizados de HTML y script no se ven afectados, y no se aplica formato durante el guardado o la publicación.

• Cambiar a la Vista de Código te permite añadir elementos HTML personalizados, aplicar estilos en línea o hacer ajustes precisos.

• Utiliza Ctrl + F para realizar una búsqueda persistente en la vista de código:

  • Pulsa Enter para navegar a la siguiente aparición del término de búsqueda.

  • Pulsa Shift + Enter para navegar a la ocurrencia anterior.

• En el panel de vista de código , el Más icono () está desactivado.

NOTA

• Debes hacer clic en el botón Guardar para guardar los cambios realizados en la vista de código.

• La lista Ordenada y la lista No Ordenada no tienen orden secuencial.

• Los tipos de listas anidadas no están soportados en los siguientes escenarios:

  • Cuando el contenido se copia y pega.

  • En ciertos escenarios de migración de contenido.

Añadiendo un comentario en línea en el editor avanzado WYSIWYG

1. Navega hasta el artículo que desee en el portal de la Base de conocimiento.

2. Selecciona el texto deseado para añadir un comentario y aparecerá un menú flotante.

3. Haz clic en el icono de Comentar () desde el menú flotante.

4. Utiliza herramientas básicas de formato como negrita y listas. Además, utiliza el símbolo @ para mencionar a los miembros del equipo de tu proyecto si es necesario.

5. Cuando termines, haz clic en el icono Enviar ().

NOTA

Para desactivar este modo, navega al portal de la Base de conocimientos, Documentación () en la barra de navegación izquierda.

En el panel de navegación izquierdo, navega a herramientas de contenido > diseñador de flujo de trabajo. Pasa el cursor sobre el estado deseado y haz clic en el icono Editar (✎) y desactiva el interruptor solo de lectura .

Para ver todos los comentarios en un artículo:

1. Navega hasta el artículo deseado.

2. Haz clic en el icono de Comentar () situado a la derecha, cerca del botón de publicar.

3. Aparecerá el panel de Comentarios. Utiliza el desplegable en la parte superior para filtrar las opciones, como Todos los comentarios, comentarios mencionados, comentarios abiertos y comentarios resueltos.

Aquí puedes responder a los comentarios.

NOTA

Para más información, lee el artículo sobre Reviewing an article using Inline comments

Uso de listas numeradas y multinivel en el editor avanzado WYSIWYG

En el editor avanzado WYSIWYG, puedes añadir tanto listas numeradas como listas multinivel para organizar tu contenido de forma eficaz.

Creación de una lista numerada

Puedes crear una lista numerada usando uno de los siguientes métodos:

Método 1:
Escribe cualquiera de los siguientes textos seguidos de un espacio, según tu requisito:
1., , , , , , , 1)a), , o (α).I.i.A.a.i)

Método 2:
Usa el comando de barra (/):

• /numbered list – para añadir una lista numerada. Pasa el cursor sobre la lista numerada en el menú con barra para ver las opciones disponibles.

• /multi-level list – para añadir una lista multinivel. Pasa el cursor sobre la lista multinivel en el menú con barra para ver la lista de opciones de lista multinivel.

Método 3:

• Selecciona el contenido deseado y pulsa Ctrl + Shift + O o Ctrl + Shift + 7.

• Por defecto, la lista numerada comienza con 1., 2., 3., y así sucesivamente.

Estilos de lista disponibles

Formatos de lista numerada

Los siguientes estilos de lista numerada están disponibles:

Formatos de lista multinivel

Puedes elegir entre cuatro tipos de listas multinivel:

Format painter en el editor avanzado WYSIWYG

El Format painter en Document360 te ayuda a copiar y aplicar rápidamente el formato de texto de una sección a otra, ahorrando tiempo y asegurando la coherencia en tu contenido.

Puedes acceder al Format painter desde las siguientes ubicaciones en el editor avanzado WYSIWYG:

• Menú de formato

• Menú burbuja que aparece cuando seleccionas texto

Usando el Format Painter

Para usar el Format Painter:

1. En el editor avanzado WYSIWYG, selecciona el texto fuente cuyo formato quieras copiar.

2. Haz clic en el icono de Formatear () desde el menú de formato o burbuja.

3. El cursor cambiará a un icono de pincel, indicando que el Formatear está activo.

4. Aplica el formato copiado mediante:

   • Hacer clic en una palabra o letra del texto objetivo (solo aplica a la palabra entera).

   • Arrastrando el ratón para resaltar una selección.

   • Seleccionando un bloque entero de texto.

Una vez aplicado el formato o cancelado el Format Painter, el cursor volverá a la normalidad.

Formato que se copiará

Solo se copiará el formato a nivel de texto . Esto incluye:

• Tipo, tamaño y color de la tipografía

• Negrita, cursiva, subrayado, tachado

• Espaciado entre letras

• Color de fondo (resaltado)

NOTA

• Para los encabezados, también se copiará la etiqueta de encabezado, pero solo si se selecciona todo el bloque.

• El estilo copiado se basa en el primer carácter del texto fuente seleccionado.

Cancelación del Formato de pintor

El Format painter se desactivará si:

• Haz clic en cualquier sitio fuera del editor.

• Pulsa Esc.

• Realiza cualquier otra acción en el editor o en el panel.

• Haz clic en el icono activo de Formatear en el menú de Formato.

NOTA

• Pulsa Ctrl + Z o haz clic en el icono Deshacer () en el menú de Formato para deshacer el formato aplicado.

• Pulsa Alt + Shift + V o haz clic en el icono Borrar () en el menú Formato para borrar el formato del texto seleccionado.

Atajos de teclado para Format painter

Los atajos de teclado para usar Format Painter son:

Opciones de formato para pegar desde Microsoft Word

Al pegar contenido de Microsoft Word, puedes conservar o borrar el formato, incluyendo elementos como listas, tablas, sangrías y fuentes.

1. Haz clic en Pegar con formato para conservar el formato del contenido de Microsoft Word.

2. Haz clic en Pegar como texto plano para borrar el formato del contenido de Microsoft Word.

Solución de problemas

No se pudo editar la sección del artículo debido a etiquetas HTML no soportadas

Este problema ocurre cuando un artículo se convierte del editor WYSIWYG al editor avanzado WYSIWYG, lo que resulta en etiquetas HTML no soportadas.

Pasos para resolver:

1. Para evitar esto, evita convertir artículos del editor estándar WYSIWYG al editor avanzado WYSIWYG.

2. En su lugar, importa o copia y pega contenido directamente en el editor avanzado WYSIWYG para evitar problemas de formato.

3. Si el problema ya ha ocurrido, revisa la vista de código del artículo y elimina cualquier etiqueta HTML no soportada. Estas etiquetas suelen estar envueltas dentro de la <editor360-custom-block> etiqueta. Eliminar esta etiqueta restaurará la funcionalidad de edición y resolverá el problema.

.onehope {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: smaller;
    background-color: white;
}
.onehope .onehope_left {
    flex: 1;
    margin-right: 0.5vw;
    margin-top: 25px;
    margin-left: 0.2vw;
    text-align: justify;
}
.onehope .onehope_right {
    flex: 1;
    margin-right: 0vw;
    margin-left: 1vw;
    max-width: 30%;
    text-align: justify;
} 

<div class="onehope">
    <div class="onehope_left">
        <h3>How to reset your password</h3>
        <p>If you forget your password, click <b>Forgot Password</b> on the login page. 
        Enter your registered email, and you’ll receive a password reset link.</p>
    </div>
    <div class="onehope_right">
        <h4>Tip</h4>
        <p>For better security, choose a password with at least 8 characters, 
        including numbers and special symbols.</p>
    </div>
</div>