ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / HTML Editor control
  • Overview of the HTML Editor control
  • Creating an HTML Editor control
  • HTML Editor control features
  • Location of images inserted into the HTML Editor control
  • Character encoding
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview of the HTML Editor control
The HTML Editor control allows users to create and modify HTML pages.
This control is based on Chromium Embedded Framework (CEF). Chromium Embedded Framework (CEF) is only supported on Windows 10 or later.
The ribbon, which is included in the control, allows access to all the necessary functions:
  • font, size, color,
  • bold, italics, underline, strikethrough...
  • import CSS styles,
  • image management: move, crop, resize, rotate...
  • edit links,
  • undo/redo,
  • copy/paste raw text, RTF, Docx, HTML...
  • paste without formatting,
  • save,
  • print,
  • export to PDF,
  • emojis,
  • alignment,
  • indent,
  • tables,
  • spelling checker,
  • find/replace,
  • etc.
iPhone/iPadMac Catalyst The HTML Editor control is only available from iOS 13 onwards.
Creating an HTML Editor control
To create an HTML Editor control:
  1. On the "Creation" tab, in the "Other controls" group, expand "HTML" and select "HTML Editor".
  2. Click at the desired location to create the control. The control appears in the editor.
Note: The dimensions of the field created are optimized to occupy the space available at the position indicated.. If the field size doesn't suit you, use the Ctrl + Z key combination: the field will return to its default size.
To view the characteristics of the control, select "Description" in the context menu.
HTML Editor control features
The "General" tab in the description window of the HTML Editor control includes the following options:
  • With ribbon: Displays a ribbon at the top of the field.. This ribbon contains different options for handling the HTML document displayed in the control. You can:
    • use the default ribbon. In this case "Ribbon source IW" corresponds to "None".
    • customize the default ribbon.
      Simply select the default preset window in "Ribbon source IW". In this case, the "IW_WINDEVAAF_HTMLEditorRibbon" window is automatically included in your project, in the WDAAF internal component. This internal window can be modified as required. This window contains all the code required to manage the HTML Editor control. It is recommended to check for UI errors and make sure the window works properly after any change is made.
    • use an internal window to create a specific ribbon.
      Any internal window of your project can be used to create this ribbon.
  • When using the ribbon, the option "Apply project skin template to ribbon" makes it possible to automatically use the project skin template on the selected ribbon.
  • Adapt control to write emails: If this option is checked, the HTML Editor field is adapted for email input..
    Warning: this option affects the location of an image inserted in the HTML document..
  • Allow change of document (Open, New, etc.): If this option is checked, the user will be able to load any document in the HTML Editor field.. Otherwise, the "Open" and "New" options will not be available. It will only be possible to edit the HTML document in the control.
  • Enable HTML source code editing: If this option is checked, the Ribbon control will display a "View" pane, enabling you to view and modify the HTML source code..
  • Enable [Check spelling] by default: Indicate whether the spelling checker should be activated.. For more details, see Check spelling based on Hunspell dictionaries.

Location of images inserted into the HTML Editor control

When an image is inserted into an HTML document, its location will vary according to the "Adapt control to write emails" option in the "General" tab of the HTML Editor control description.
If "Adapt control to write emails" is checked:
In this mode, inserted or pasted images will not embedded into the generated HTML code. Only the name of the image will be stored. The generated HTML code will have the following format:
<img src="nom-image.png">
The image will be copied to the working directory of the HTML Editor control.
The working directory of the HTML Editor control can be set using the WorkingDirectory property.
In the case of HTML text intended to be sent as an email, the working directory that contains the images can be used as the image base directory for the EmailImportHTML function. Example:
MonEmail is Email
HTMLEditorGet(EDHTML_Nouvel_Email, hegValue, EditeurHTMLRécupère_Callback)

	INTERNAL PROCEDURE EditeurHTMLRécupère_Callback(valeur)
		EmailImportHTML(MonEmail, valeur, EDHTML_Nouvel_Email.RépertoireDeTravail)
	END
If "Adapt control to write emails" is not checked:
  • If the image is inserted into the HTML Editor control from the clipboard, the image will be embedded into the HTML code using base64 encoding.
    The HTML code generated for the image will have the following format:
    <img src="data/image/png;base64...">
  • If the image is inserted using the "Image" button in the "Insert" tab of the ribbon, there are two possible cases:
    • The "Embed image in page" option is checked: the HTML code generated for the image will therefore be of the form:
      <img src="data/image/png;base64 ...">
    • The "Embed image in page" option is unchecked: the HTML code generated memorizes the name of the image and will be in the form:
      <img src="nom-image.png">

Character encoding

The HTML Editor control encodes the characters to UTF-8 to make sure they are displayed in a coherent way across all platforms.
If the HTML Editor control is used to send an email, HTMLEditorToEmail will automatically insert <meta charset="utf-8"/> in the HTML part of the email.
If the HTML code in the control is retrieved with HTMLEditorGet and then exchanged with a third-party application (by inserting data in a database, calling a SOAP web service or a REST API, etc.), you can do one of the following:
  • Configure the third-party application to handle the HTML code as UTF-8.
  • Use UTF8ToString to modify the encoding of the HTML code.
If none of these solutions is applied, some characteristics (e.g., accents) will not be correctly displayed.
Related Examples:
WD Mail Complete examples (WINDEV): WD Mail
[ + ] This application is an email client developed in WINDEV. It is based on the Email objects.
This email client is used to retrieve and send emails by using the POP, IMAP and SMTP protocols.
You have the ability to apply filters to the incoming emails.

The application can also be used to manage several email accounts. The writing of an email is based on the HTML edit control.
Minimum version required
  • Version 26
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 09/21/2024

Send a report | Local help