PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • 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
  • Swapping
  • HTML Static control/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 run time, 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 the position where the control will be created in the page. The control appears in creation mode.

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, expand "Link" and select "Insert a link". The description window of link is displayed. This window is used to specify the link characteristics. The action associated with the link can be defined in the "General" tab.On the "Text" pane, in the "Controls" group, click "Link". The description window of link is displayed. This window is used to specify the link characteristics. The action associated with the link can be defined in the "General" tab.
Notes:
  • 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 description of Rich Text Area control.
  • 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, expand "Image" and select "Insert an image".On the "Text" pane, in the "Controls" group, click "Image".
  4. The description window of image is displayed. 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.
Notes:
  • 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 description of Rich Text Area control.
  • 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 Rich Text Area control can be accessed via the description window of control. The description window of 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 ("GUI" tab). You have the ability to define:
    • whether the Rich Text Area control can be stacked.
    • the semantics associated with the Rich Text Area control.
Notes:
  • The description window of the controls found in the Rich Text Area control differs from the one of the control outside 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 have the ability to define an anchor via the description window of Static control ("General" tab, "Define as anchor" option).
Swapping

HTML Static control/Rich Text Area control

An HTML Static control can be automatically changed into a Rich Text Area control:
  1. Select the HTML Static control to transform.
  2. On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "HTML Static to Rich Text Area".
Note: This transformation can also be performed from the popup menu of HTML Static control ("Transform the HTML Static into Rich Text Area").
Minimum required version
  • Version 19
Comments
Click [Add] to post a comment