AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Editor HTML
  • Presentación del control Editor HTML
  • Crear un control Editor HTML
  • Características del control Editor HTML
  • Ubicación de las imágenes insertadas en el control Editor HTML
  • Codificación de caracteres
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación del control Editor HTML
El control Editor HTML permite a los usuarios crear y modificar páginas HTML. Este control está basado en Chromium Embedded Framework (CEF).
La cinta de opciones incluida en el control permite acceder a todas las funciones necesarias:
  • elegir la fuente, tamaño, color,
  • negrita, cursiva, subrayado, tachado...
  • importar estilos CSS,
  • gestión de imágenes: mover, recortar, redimensionar, girar, etc.
  • editar enlaces,
  • deshacer/rehacer,
  • copiar/pegar texto sin formato, RTF, Docx, HTML...
  • pegar sin formato,
  • guardar,
  • imprimir,
  • exportar a PDF,
  • emojis,
  • alineación,
  • sangría,
  • tablas,
  • corrector ortográfico,
  • buscar/reemplazar,
  • etc.
iPhone/iPadMac Catalyst El control Editor HTML solo está disponible a partir de iOS 13.
Crear un control Editor HTML
Para crear un control Editor HTML:
  1. En la pestaña "Creación", en el grupo "Otros controles", despliegue "HTML" y seleccione "Editor HTML".
  2. Haga clic en la ubicación en la que desea crear el control. El control aparece en el editor.
Observación: Las dimensiones del control que se creó se optimizan para ocupar el espacio disponible en la ubicación indicada. Si el tamaño del control no es el indicado, pulse Ctrl+Z: el control volverá al tamaño predeterminado.
Para ver las características del control, seleccione la opción "Descripción" en el menú contextual.
Características del control Editor HTML
La pestaña "General" de la ventana de descripción del control Editor HTML incluye las siguientes opciones:
  • Con cinta de opciones: Permite mostrar una cinta de opciones en la parte superior del control. Esta cinta contiene diferentes opciones para manipular el documento HTML que se muestra en el control. Puede:
    • utilizar la cinta de opciones predeterminada. En este caso, la opción "VI fuente de la cinta" corresponde a "Ninguna".
    • personalizar la cinta de opciones predeterminada.
      Simplemente seleccione la ventana predefinida en la opción "VI fuente de la cinta". En este caso, la ventana "IW_WinDevAAF_HTMLEditorRibbon" se incluye automáticamente en el proyecto. Esta ventana interna (disponible en inglés y francés) puede modificarse según sus necesidades. La ventana también contiene todo el código necesario para manipular el control Editor HTML. Le recomendamos comprobar los errores de UI y asegurarse de que la ventana funciona correctamente después de realizar cualquier cambio.
    • utilizar una ventana interna para crear una cinta de opciones específica.
      Puede utilizar cualquier ventana interna del proyecto para crear la cinta.
  • Al utilizar la cinta de opciones, la opción "Aplicar plantilla del proyecto a la cinta de opciones" permite utilizar automáticamente la plantilla del proyecto en la cinta seleccionada.
  • Adaptar control para escribir correos electrónicos: Si se selecciona esta opción, el control Editor HTML se adapta para escribir correos electrónicos.
    Atención: esta opción cambia la ubicación de las imágenes insertadas en el documento HTML.
  • Permitir cambiar de documento (Abrir, Nuevo, etc.): Si se selecciona esta opción, el usuario podrá cargar cualquier documento en el control Editor HTML. De lo contrario, las opciones "Abrir" y "Nuevo" no estarán disponibles. Solo será posible editar el documento HTML en el control.
  • Habilitar edición del código fuente HTML: Si se selecciona esta opción, se mostrará una pestaña "Vista" en la cinta de opciones para ver y modificar el código fuente HTML.
  • Activar [Revisar ortografía] de forma predeterminada: Determina si el corrector ortográfico debe estar habilitado. Para obtener más información, consulte Revisar ortografía con diccionarios Hunspell.

Ubicación de las imágenes insertadas en el control Editor HTML

Cuando se inserta una imagen en un documento HTML, su ubicación variará en función de la opción "Adaptar control para escribir correos electrónicos" de la pestaña "General" de la descripción del control Editor HTML.
Si la opción "Adaptar control para escribir correos electrónicos" está seleccionada:
En este modo, las imágenes insertadas o pegadas no se incrustarán en el código HTML generado. Solo se almacenará el nombre de la imagen. El código HTML generado tendrá el siguiente formato:
<img src="nom-image.png">
La imagen se copiará en el directorio de trabajo del control Editor HTML.
El directorio de trabajo del control Editor HTML puede definirse utilizando la propiedad WorkingDirectory.
En el caso de un texto HTML que será enviado por correo electrónico, el directorio de trabajo que contiene las imágenes puede utilizarse como directorio base de las imágenes para la función EmailImportHTML. Ejemplo:
MyEmail is Email
HTMLEditorGet(HTMEDT_New_Email, hegValue, HTMLEditorGet_Callback)
 
INTERNAL PROCEDURE HTMLEditorGet_Callback(value)
EmailImportHTML(MyEmail, value, HTMEDT_New_Email.WorkingDirectory)
END
Si la opción "Adaptar control para escribir correos electrónicos" no está seleccionada:
  • Si la imagen se inserta en el control Editor HTML desde el portapapeles, la imagen se incrustará en el código HTML utilizando la codificación base64.
    El código HTML generado para la imagen tendrá el siguiente formato:
    <img src="data/image/png;base64...">
  • Si la imagen se inserta mediante la opción "Imagen" de la pestaña "Insertar" de la cinta de opciones, se pueden presentar dos casos:
    • Si la opción "Insertar imagen en la página" está seleccionada: El código HTML generado para la imagen tendrá el siguiente formato:
      <img src="data/image/png;base64 ...">
    • Si la opción "Insertar imagen en la página" no está seleccionada: el código HTML generado almacenará el nombre de la imagen y tendrá el siguiente formato:
      <img src="nom-image.png">

Codificación de caracteres

El control Editor HTML codifica los caracteres en UTF-8 para asegurar que se muestren de forma coherente en todas las plataformas.
Si se utiliza el control Editor HTML para enviar un mensaje de correo electrónico, la función HTMLEditorToEmail insertará automáticamente el elemento <meta charset="utf-8"/> en la parte HTML del mensaje.
Si el código HTML del control se obtiene con la función HTMLEditorGet y luego se intercambia con una aplicación de terceros (insertando datos en una base de datos, llamando a un servicio web SOAP o a una API REST, etc.), puede realizar una de las siguientes acciones:
  • Configurar la aplicación de terceros para manipular el código HTML como UTF-8.
  • Utilizar la función UTF8ToString para modificar la codificación del código HTML.
Si no se aplica ninguna de estas soluciones, algunas características (por ejemplo, los acentos) no se mostrarán correctamente.
Versión mínima requerida
  • Versión 26
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 18/09/2023

Señalar un error o enviar una sugerencia | Ayuda local