editor HTML

Descripción general

El editor HTML integrado permite a instructores, profesores y administradores crear y editar contenido directamente dentro de cursos, mensajes, widgets y mucho más.

Este artículo te enseñará cómo acceder y utilizar los distintos elementos del editor para crear contenido atractivo y estético.

Tenga en cuenta que la plataforma empresarial utiliza por defecto el término "curso" y la plataforma académica el término " clase" . En este artículo, los términos "curso" y "clase" son intercambiables.

El menú de la barra de herramientas

El editor HTML se muestra al editar contenido en cursos, mensajes, widgets y más. La barra de herramientas consta de una barra de menú e iconos que permiten editar el contenido de la sección.

Tenga en cuenta que las capturas de pantalla de este artículo se muestran dentro de una sección del curso, pero la barra de herramientas funciona igual en cursos, mensajes y widgets. El editor de contenido, situado a la izquierda de la barra de herramientas, solo está disponible al editar cursos.

Sección de curso, módulo o página en modo de edición con la barra de herramientas resaltada.

La barra de menú superior consta de siete menús, que se describen con mayor detalle a continuación.

Sección Curso, Módulo, Editar con los menús superiores de la barra de herramientas resaltados.

Archivo

El menú Archivo incluye las siguientes acciones:

Título	Descripción
Nuevo documento	Borra todo el texto, imágenes y enlaces de la ventana de texto.
Avance	Abre una ventana emergente para ver una vista previa del contenido publicado.
Imprimir	Imprime el contenido de la ventana de texto.

Editar

El menú Editar incluye las siguientes acciones.

Título	Descripción
Deshacer	Deshaga su última acción.
Rehacer	Rehaga su acción más reciente.
Cortar	Elimina el texto o la imagen seleccionados y guárdalos en el portapapeles.
Copiar	Copia el texto o la imagen seleccionados y guárdalos en el portapapeles.
Pasta	Pegar texto/imagen desde el portapapeles.
Pegar como texto	Pega el contenido del portapapeles solo como texto, sin formato.
Seleccionar todo	Seleccione/resalte todo el contenido de la ventana de texto.
Buscar y reemplazar	Busca una palabra o frase y reemplázala por una nueva (si procede).

Vista

El menú Ver incluye las siguientes acciones para visualizar texto y caracteres dentro de la ventana de texto.

Título	Descripción
Código fuente	Visualice/edite el código fuente en la ventana de texto.
Mostrar caracteres invisibles	Muestra caracteres invisibles como espacios y saltos de línea suaves.
Mostrar bloques	Muestra bloques de párrafos dentro de la ventana de texto.
Avance	Abre una ventana emergente para ver una vista previa del contenido publicado.

Insertar

El menú Insertar incluye las siguientes acciones para insertar imágenes, vídeos, tablas, enlaces y mucho más.

Título	Descripción
Enlace	Inserta un hipervínculo a una URL.
Medios de comunicación	Insertar/incrustar un archivo multimedia.
Mesa	Inserta y crea una tabla.
Personaje especial	Inserta un carácter especial.
Emojis	Inserta un emoji.
Línea horizontal	Inserta una línea horizontal.
Salto de página	Inserta un salto de página para comenzar una nueva página.
Espacio sin roturas	Inserta un espacio que no rompa la página.
Ancla	Inserta un ancla/marcador en una posición/ubicación.
Insertar plantilla	Inserta una plantilla guardada.
Guardar como plantilla	Guarda el texto resaltado como plantilla.
Fecha/hora	Seleccione la fecha o la hora en el menú desplegable.
Editar ecuación	Haz clic para editar una ecuación resaltada.
Subir imagen	Haz clic para subir una imagen.
Subir archivo	Haz clic para subir un archivo.
Crear videoconferencias	Haga clic para agregar videoconferencia al texto*.
Grabar audio	Haz clic para grabar audio directamente en la ventana de texto.
Grabar vídeo	Haz clic para grabar el vídeo directamente en la ventana de texto.

* Para que se muestren las opciones de creación de videoconferencias, primero debe instalar la(s) aplicación(es) de videoconferencia desde el Centro de aplicaciones.

Formato

El menú Formato incluye las siguientes acciones para dar formato al texto.

Título	Descripción
Atrevido	Resalte en negrita el texto seleccionado.
Itálico	Pon en cursiva el texto seleccionado.
Subrayar	Subraya el texto seleccionado.
Tachado	Tacha el texto seleccionado.
Sobrescrito	Formatee el texto seleccionado como superíndice.
Subíndice	Formatee el texto seleccionado como subíndice.
Código	Formatee el texto seleccionado como código.
Bloques	Inserte el formato de bloque apropiado desde el menú desplegable.
Fuentes	Seleccione una fuente diferente en el menú desplegable.
Tamaños de fuente	Seleccione un tamaño de fuente en el menú desplegable.
Alinear	Seleccione un estilo de alineación de texto en el menú desplegable.
Altura de línea	Seleccione la altura de línea en el menú desplegable.
Aumentar sangría	Aplica sangría al texto o párrafo que se encuentre a la derecha.
Disminuir sangría	Mueva el texto o párrafo hacia la izquierda.
Color del texto	Seleccione el color de texto deseado en el menú desplegable.
color de fondo	Seleccione un color de fondo en el menú desplegable.
Formato claro	Formato claro del texto seleccionado.

Herramientas

El menú Herramientas incluye las siguientes acciones.

Título	Descripción
Código fuente	Visualiza/edita el código fuente.
Recuento de palabras	Consulta el recuento de palabras y caracteres.

Mesa

El menú Tabla incluye las siguientes acciones para insertar una tabla y modificar su estructura.

Título	Descripción
Mesa	Insertar una tabla.
Celúla	Opciones de modificación para las celdas seleccionadas desde el menú desplegable.
Fila	Modifique, elimine y/o inserte opciones para la(s) fila(s) seleccionada(s) desde el menú desplegable.
Columna	Modifique, elimine y/o inserte opciones para la(s) columna(s) seleccionada(s) desde el menú desplegable.
Propiedades de la tabla	Visualice y modifique las propiedades de la tabla, como el ancho, la altura, los bordes, etc.
Eliminar tabla	Eliminar la tabla seleccionada.

El menú secundario de la barra de herramientas

Debajo del menú principal, la barra de herramientas consta de opciones desplegables e iconos de fácil acceso para un formato adicional.

Deshacer y rehacer

Haz clic en el icono Deshacer para deshacer la acción anterior.
Haz clic en el icono Rehacer para deshacer la acción anterior.

Estilos de párrafo y encabezado

Haz clic en el menú desplegable de estilo de encabezado para aplicar formatos y estilos al texto.

Sección de edición del curso, módulo, con el menú de estilo de encabezado activo y resaltado.

Estilo de fuente

Haz clic en el menú desplegable de fuente para cambiar la fuente del texto.

Tamaño de fuente

Haz clic en el menú desplegable de tamaño de fuente para cambiar el tamaño del texto.

Formato de fuente

Haz clic en el icono de negrita para poner el texto en negrita.
Haz clic en el icono de cursiva para poner el texto en cursiva.
Haz clic en el icono de subrayado para subrayar el texto.

Color del texto

Haz clic en el icono de color de texto para elegir/cambiar el color de la fuente.

Curso, Módulo, Sección de edición con el menú de color de texto activo y resaltado.

Alineación de texto

Haz clic en el icono de alineación para alinear el texto.

Sección de edición del curso, módulo, con el menú de alineación activo y resaltado.

Lista con viñetas

Haz clic en el icono de lista con viñetas para crear y formatear una lista con viñetas.

Lista numerada

Haz clic en el icono de lista numerada para crear y formatear una lista con viñetas o numerada.

Subir imagen y subir archivo

Haz clic en el icono de subir imagen para subir una imagen.
Haz clic en el icono de subir archivo para cargar cualquier archivo.

Formato claro

Haz clic en el icono Borrar formato para eliminar los estilos que se hayan podido transferir al copiar y pegar contenido.

color de fondo

Haz clic en el icono de color de fondo para resaltar texto o imágenes.

Barra de herramientas avanzada

Para obtener funcionalidades adicionales:

Haz clic en más icono para mostrar la barra de herramientas avanzada.

Curso, Módulo, Sección de edición con el icono de más resaltado

La barra de herramientas avanzada se muestra debajo de la barra de herramientas secundaria e incluye opciones adicionales que se describen a continuación.

Sección Curso, Módulo, Editar con los iconos de la barra de herramientas Avanzada resaltados.

Sangrías y línea horizontal

Haz clic en el icono Disminuir sangría para reducir la sangría del texto.
Haz clic en el icono de aumentar sangría para aplicar sangría al texto.
Haz clic en el icono de línea horizontal para insertar una línea horizontal.

Iconos de disminución de sangría, aumento de sangría y línea horizontal

Emojis

Haz clic en el emoji Icono para abrir el teclado de emojis.
Haz clic en un emoji para insertarlo.

Personajes especiales

Haz clic en el carácter especial. Icono para abrir la ventana emergente de caracteres especiales.
Haz clic en un carácter especial para insertarlo.

Sección de edición del curso, módulo, con la pantalla emergente de caracteres especiales.

Iconos avanzados

Haz clic en el icono de insertar/editar enlace para insertar un enlace a cualquier URL.
Haz clic en el icono Insertar/Editar medios para insertar/incrustar un enlace a cualquier URL.
Haz clic en el icono Insertar/editar ecuación para insertar/incrustar un enlace a cualquier URL.
Haz clic en el icono Insertar plantilla para insertar una plantilla.
Haz clic en el icono de código fuente. Para ver el código fuente de la página actual.
Haz clic en el icono de grabar audio . para grabar audio directamente en la página del curso.
Haz clic en el icono de grabar vídeo . para grabar vídeos directamente en la página del curso.

Haz clic en el icono Crear videoconferencia para crear un enlace de videoconferencia utilizando una de las opciones del menú desplegable.

Nota: Solo se mostrarán las aplicaciones de videoconferencia que tenga instaladas en su plataforma.

Sección de edición del curso, módulo, con el menú Crear videoconferencia activo y resaltado.

Mejores prácticas

Utilice estas buenas prácticas para sacar el máximo partido al editor.

Para insertar un salto de línea en lugar de un nuevo párrafo, pulse Mayús + Intro.
Al insertar widgets HTML, primero visualice la ventana de texto en el código fuente.

Haz clic en el menú desplegable Ver.
Haga clic en < > Código fuente .

Pegue el contenido de terceros como texto sin formato para evitar errores de formato.
Para hacer invisibles los bordes de una tabla:

Seleccione la tabla.
Haga clic en Propiedades de la tabla .
En la pestaña General de la ventana emergente, establezca el Ancho del borde en "0".
En la pestaña Avanzado , seleccione el estilo de borde como "Oculto" o "Ninguno".

Curso, Módulo, Sección de edición con una tabla seleccionada y el icono de propiedades de la tabla resaltado.

corrector ortográfico

El editor incluye un corrector ortográfico que marca con una línea roja las palabras que no están escritas correctamente. Para corregir un error ortográfico:

Pulsa CTRL + Clic derecho del ratón .
Seleccione la ortografía correcta de la lista de sugerencias.

Sección de edición del curso, módulo, con un menú ortográfico activo y resaltado.

Variables de incrustación

Puedes insertar variables en las páginas de las lecciones utilizando el formato {{nombre de la variable}}. Esto te permite personalizar el contenido para usuarios y cursos.

Las siguientes variables se pueden utilizar en la página de contenido:

{{class_custom_field_1}}
{{class_custom_field_2}}
{{class_finish_date}}
{{class_id}}
{{class_location}}
{{class_name}}
{{class_name_with_link}}
{{class_start_date}}
{{completed_at_utc}}
{{course_code}}
{{créditos}}
{{días_en_clase}}
{{días_restantes}}
{{desactivar_estudiantes_después}}
{{organization_id}}
{{organization_name}}
{{section_code}}
{{site_name}}
{{site_name_with_url}}
{{teacher_name}}
{{nombre_del_profesor_con_enlace}}
{{user_email}}
{{user_first_name}}
{{user_full_name}}
{{user_full_name_with_link}}
{{user_id}}
{{user_last_name}}
{{user_prefered_contact_method}}
{{user_ssn}}
{{userid}}
{{por qué}}

Sección de edición de cursos, módulos y variables con ejemplos resaltados.

Vídeos de tallas

Si agregas un video como enlace en el editor HTML, puedes establecer su tamaño usando este código HTML:

<a width='100' height='700'>enlace</a>.

Si desea que el vídeo se ajuste automáticamente al tamaño, puede omitir uno de los valores (ancho o alto).
También puedes usar valores porcentuales para establecer el tamaño de un video, por ejemplo, <width='100%' >.

Edición de imágenes

El editor ofrece varias opciones para editar imágenes una vez que se han subido. Para editar una imagen:

Haz clic en la imagen.
Aparece un menú de opciones.

Icono	Descripción
	Gire la imagen en sentido contrario a las agujas del reloj.
	Gire la imagen en el sentido de las agujas del reloj.
	Voltear la imagen horizontalmente
	Voltear la imagen verticalmente
	Recortar imagen
	Editar propiedades de la imagen

Curso, Módulo, Sección de edición con una imagen resaltada y la barra de herramientas de edición de imagen activa.

Si selecciona el icono Editar propiedades de la imagen , se mostrará la ventana emergente Insertar/Editar imagen.

Fuente : Muestra la fuente de la imagen.
Descripción alternativa : Esta descripción es leída por lectores de pantalla para ayudar a los usuarios con discapacidad visual.
Ancho y alto : Ajusta el tamaño de la imagen.

Nota: Utilice el icono del candado para asegurarse de que la imagen mantenga su proporción de ancho/alto.

Al añadir una nueva imagen, también puedes agregar una descripción para lectores de pantalla:

Introduzca una descripción en el campo Descripción de la imagen .

Ventana emergente para subir imágenes

Plantillas de contenido

Las plantillas de contenido permiten guardar fragmentos de HTML en el Catálogo de recursos e insertarlos fácilmente en las áreas de contenido posteriormente. Esta función permite crear una biblioteca de elementos de contenido comunes que se utilizan con frecuencia en dichas áreas.

Para agregar un fragmento de HTML a una plantilla de contenido:

Seleccione el texto y/o las imágenes en el editor HTML.
Clic derecho del ratón.
Seleccione Guardar como plantilla .

Curso, Módulo, Sección de edición con texto e imagen seleccionados, con la opción Guardar como plantilla resaltada en el menú contextual (clic derecho).

Introduce un título para la plantilla.
Haz clic en Aceptar .
La plantilla de contenido se guardará en tu biblioteca personal.

Ventana emergente para guardar como plantilla

Para acceder a tus plantillas de contenido guardadas:

Haz clic en Recursos en la barra de navegación izquierda.
Haga clic en Catálogo en el menú desplegable.
Filtrar por tipo de recurso > Plantilla de contenido en el panel de búsqueda.
Haz clic en tu plantilla de contenido.

Recursos, página del catálogo con la sección Tipo de recurso resaltada en el panel de búsqueda.

Se muestra la plantilla de contenido. Para ver más detalles sobre una plantilla de contenido:

Haga clic en Detalles .

Recursos, Ventana emergente de plantilla de contenido

Ahora puedes actualizar la sección de contenido:

Haz clic en Editar para editar el contenido .
Haz clic en Eliminar para borrar la plantilla.

Recursos, plantilla de contenido con iconos de edición y eliminación resaltados

Si haces clic en editar, podrás actualizar el contenido y compartirlo con otros usuarios.

Seleccione Biblioteca personal , de organización o de empresa si desea que la plantilla de contenido esté disponible para otros usuarios.
Después de editar el contenido, haga clic en Guardar .

Recursos, pantalla de edición de plantilla de contenido

Para insertar una copia de la plantilla de contenido en una sección:

Acceda a la sección.
Clic derecho del ratón.
Seleccione Insertar plantilla .
Seleccione la plantilla de la lista desplegable.
Haz clic en Guardar .

Curso, Módulo, Sección Editar con la plantilla Insertar resaltada en el menú contextual (clic derecho).

Cómo usar el editor HTML