- Overview of the HTML Editor control
- Creating an HTML Editor control
- Characteristics of the HTML Editor control
- Location of images inserted into the HTML Editor control
- Character encoding
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,
- copy/paste raw text, RTF, Docx, HTML..
- paste without formatting,
- export to PDF,
- spelling checker,
The HTML Editor control is only available from iOS 13 onwards.
Creating an HTML Editor control
To create an HTML Editor control:
- On the "Creation" tab, in the "Other controls" group, expand "HTML" and select "HTML Editor".
- 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 the HTML Editor control
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 ribbon proposed by default. In this case "Ribbon source IW" corresponds to "None".
- customize the ribbon proposed by default.
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 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 propose 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, the ribbon will display a "View" tab 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:
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
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
MyEmail is Email
HTMLEditorGet(HTMEDT_New_Email, hegValue, HTMLEditorGet_Callback)
INTERNAL PROCEDURE HTMLEditorGet_Callback(value)
EmailImportHTML(MyEmail, value, HTMEDT_New_Email.WorkingDirectory)
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 with automatic base 64 encoding.
The HTML code generated for the image will have the following format:
- 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:
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.
Complete examples (WINDEV): WD Mail
This page is also available for…
Click [Add] to post a comment