PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • Overview of Rich Text Area control
  • Page control
  • Creating a Rich Text Area control
  • Creating the control
  • Typing a text in the Rich Text Area control
  • Inserting a link into the Rich Text Area control
  • Inserting an image into the Rich Text Area control
  • Inserting a font icon into the Rich Text Area control
  • Characteristics of Rich Text Area control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of Rich Text Area control

Page control

The Rich Text Area control (also called RTA) is a Static control offering several layout possibilities:
  • Text formatting,
  • Insertion of images or links,
  • Versions 22 and later
    Insertion of icons coming from the font,
    New in version 22
    Insertion of icons coming from the font,
    Insertion of icons coming from the font,
  • ...
The Rich Text Area control can be used to format a text section in a site.
In edit, the HTML Rich Text Area control allows the developer to type the text to display (with all the formatting options).
At runtime, the HTML Rich Text Area control allows the user to see a text with formatting, images and links.
Creating a Rich Text Area control

Creating the control

To create a Rich Text Area control:
  1. On the "Creation" pane, in the "Usual controls" group, expand "Text".
  2. Select "Rich Text Area".
  3. Click where you want to create the control in the page. The control appears in the editor.

Typing a text in the Rich Text Area control

To type a text in the Rich Text Area control:
  1. Select the control.
  2. Click the control: a yellow bar appears around the control and the control switches to edit mode.
  3. In edit mode:
    • you have the ability to type your text directly. You can for example paste a text coming from a software like Word: the formatting will be kept.
    • the editor ribbon is adapted to the input in the control: all the available edit options are displayed:
      These edit options are grouped into 4 categories:
      • Font: used to specify the font attributes for the selected text.
      • Paragraph: used to specify the attributes of paragraphs (indents, bullets, lists, centering and justification)
      • CSS style - Semantics: used to associate a CSS style and semantics to the selected text.
      • Controls: used to add controls into the Rich Text Area control:
        • an Image control,
        • a Link control,
        • Versions 22 and later
          an icon coming from the font,
          New in version 22
          an icon coming from the font,
          an icon coming from the font,
        • Versions 20 and later
          another control: all controls found in the "Creation" pane are available.
          New in version 20
          another control: all controls found in the "Creation" pane are available.
          another control: all controls found in the "Creation" pane are available.

Inserting a link into the Rich Text Area control

To insert a link into the Rich Text Area control:
  1. Enter in edit in the Rich Text Area control.
  2. Select the text that must be changed into link.
  3. On the "Text" pane, in the "Controls" group, click "Link". The link description window appears. This window is used to specify the link characteristics. The action associated with the link can be defined in the "General" tab.
Remarks:
  • When a link is inserted into the Rich Text Area control, this link corresponds to a Link control. This control is included in the Rich Text Area and it can be handled by programming via its name.
  • The list of controls found in the Rich Text Area control is displayed in the "General" tab of the control description.
  • To create a link in a Rich Text Area control, you also have the ability to Drag and Drop an existing Link control.

Inserting an image into the Rich Text Area control

To insert an image into the Rich Text Area control:
  1. Enter in edit in the Rich Text Area control.
  2. Position at the location where image will be inserted.
  3. On the "Text" pane, in the "Controls" group, click "Image".
  4. The image description window appears. This window is used to specify the image characteristics. The "General" tab is used to:
    • specify the image to display,
    • specify the wrapping mode of image and the display mode of image.
Remarks:
  • When an image is inserted into the Rich Text Area control, this image corresponds to an Image control. This control is included in the Rich Text Area and it can be handled by programming via its name.
  • The list of controls found in the Rich Text Area control is displayed in the "General" tab of the control description.
  • To create an Imagein a Rich Text Area control, you also have the ability to Drag and Drop an existing Image control.

Inserting a font icon into the Rich Text Area control

To add an icon into an HTML caption:
  1. Position the mouse cursor in the HTML text to modify.
  2. Click the Font icons button
  3. The following window is displayed.
  4. Select the family of icons in the list of fonts.
  5. Double-click the requested icon or select the icon and validate the window. The icon is added into the HTML caption at cursor position.
Characteristics of Rich Text Area control
The main characteristics of the Rich Text Area control can be accessed via the control description window. The description window of the Rich Text Area control is used to:
  • edit the HTML source code of the control ("General" tab). This code can be modified in the editor directly. You can:
    • Add HTML code. If possible, the result of the added HTML code will be viewed in the editor (only the animations are not supported). These additions are stored in the control.
    • Delete a section of HTML code. You have the ability to delete the HTML code corresponding to a link for example.
    • Fill the generated HTML code. You can for example add specific tags for displaying a help tooltip.
  • see the list of controls found in the area ("General" tab).
  • display the description window of the controls found in the area ("Edit" button in the "General" tab).
  • define the interface options ("UI" tab). You can define:
    • whether the Rich Text Area control can be stacked.
    • the semantics associated with the Rich Text Area control.
Remarks:
  • The description window of the controls found in the Rich Text Area control differs from the one of the control outside the rich text area. Indeed, some information (especially the position and the style) is defined in relation to the Rich Text Area control (and not in relation to the Link or Image control).
  • On a Static control found in a Rich Text Area control, you can define an anchor via the Static control description window ("General" tab, "Define as anchor").
Minimum version required
  • Version 19
Comments
Click [Add] to post a comment