ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

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
  • Characteristics of HTML Editor controls
  • Location of images inserted into the HTML Editor control
  • Character encoding
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
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).
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,
  • management of images: move, crop, resize, rotate, etc.
  • 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.
Remark: The dimensions of the control are optimized to take up the available space at the specified position. If the control size does not suit you, press Ctrl + Z: the control size will be reset to default.
To view the characteristics of the control, select "Description" in the context menu.
Characteristics of HTML Editor controls
The "General" tab in the description window of the HTML Editor control includes the following options:
  • With ribbon: Used to display a ribbon at the top of the control. 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 will automatically be included in your project. This internal window (available in English and French) can be modified according to your needs. 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 control is optimized for writing emails.
    Caution: this option changes the location of images inserted into 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 control. 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, a "Display" tab will appear in the ribbon to view and modify the HTML source code.
  • Enable [Check spelling] by default: Specifies whether the spelling checker should be enabled. 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:
MyEmail is Email
HTMLEditorGet(HTMEDT_New_Email, hegValue, HTMLEditorGet_Callback)
 
INTERNAL PROCEDURE HTMLEditorGet_Callback(value)
EmailImportHTML(MyEmail, value, HTMEDT_New_Email.WorkingDirectory)
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:
    • If "Embed image in the page" is checked: The HTML code generated for the image will have the following format:
      <img src="data/image/png;base64 ...">
    • If "Embed image in the page" is not checked: the generated HTML code will store the name of the image and will have the following format:
      <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 Webservice 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: 08/31/2023

Send a report | Local help