Text editor allows you to edit and visualize the content of the formatted texts, tables, hyperlinks, and source code.
Drag and drop the Text
control icon from the toolbox to the design panel. You can find control by searching in the toolbox.
Click the Properties
button in the configuration panel property pane opens.
This option allows you to enable the image for the background.
This option allows you to handle the type of the image.
You can browse the image from your local
system.
You can give the URL
of the image which must be a valid URL.
Ex: http://flagpedia.net/data/flags/normal/in.png
You can customize the image showcase style through the Image Fit
settings in the Design Tools pane or properties pane.
The image will be displayed in its original size.
The image will be filled in the available space.
The image will be uniformly occupying the space but gets clipped if it is larger than control.
The image sizes proportionally (without clipping) to best fit to the widget area.
You can customize the color of the background by enabling the background color.
Only when the Background image
is not enabled.
This property allows you to specify the transparency for the background color.
By default, the text editor in the read-only
mode, click the edit
icon to interact with the widget.
Click the tick
icon to save the Text.
Text
editor property panel is disabled by default because it does not have any items in the property panel. It contains all properties in the toolbar.
Toolbar contains the property which used in Text
. Based on the size of text editor, toolbar mode can be classified as floating
and inline toolbar
.
Inline Toolbar
Text
editor contains an inline toolbar by default because of its smaller size. The inline toolbar can be enabled by selecting the text content. This mode is active when the text editor does not have enough space to enable a floating toolbar.
Floating Toolbar
It can be enabled by increasing widget size to the required size based on the resolution. This mode is active when the text editor has enough space to display a floating toolbar.
Text editors have support to format the font, paragraph, and other functionalities.
You can format the text by applying font style, family, and color. The available font formats are bold, italic, underline, strikethrough, font size, font color, highlight color, superscript, and subscript.
Bold - It allows you to Bold the text.
Italic - It allows you to Italicize the text.
Underline - It allows you to underline the text.
Strikethrough - It allows you to strikeout the text.
Font Family - Roboto
is the default font family, it allows to change the font family of selected text. Available font families are Roboto, Segoe UI, Arial, Georgia, Impact, Tahoma, Times New Roman, Verdana
.
Font Size - Size of the selected text can be modified as pixels(px). Available font size are 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36 and 48px.
Font Color - Color of the font can be change using this item.
Highlight Color - It allows you to highlight the selected text.
SuperScript - It allows you to add superscript text.
SubScript - It allows you to add subscript text.
You can format the paragraph in the text widget. The available paragraph formats are paragraph formats, alignments, numbered and bulleted list.
Formats - This allows you to apply the formatting for the paragraph. Available formatting options are paragraph, code, quotation, and headings. By default, the paragraph
type is formatted.
Alignments - Used to align the paragraph as left, right, center, and justify.
Numbered and Bulleted List - It allows you to add numbers and bullets before the selected lines of paragraph.
This allows you to align the paragraph by vertically.
There are three options in the menu for vertical-align as follows.
Align Top - Allows you to align the paragraph by vertically top of the container.
Align middle - Allows you to align the paragraph by vertically centered.
Align Bottom - Allows you to align the paragraph by vertically bottom of the container.
Text editor’s table can be created by clicking the create table
icon on the toolbar.
To create table, do one of the following,
Choose the number of rows and columns by hovering the pointer over the cell.
Open Insert Table dialog by clicking the InsertTable
button. Enter the number of rows and columns required in the numeric textbox.
Created table is shown like below and it can be resized based on row and column.
Quick Toolbar
Quick toolbar is opened by clicking the table. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily.
Table Header - This command is available with quick toolbar option through which the header row can be added or removed from the inserted table.
Table Rows and Columns - Additional row/column in table can be added before/after selected row/column element or delete unwanted row/column.
Background Color - The background color can be set for each table cell.
Table Remove - Using the delete item in the quick toolbar, users can delete the entire table.
Alignments - Used to align the cell content as left, right, center and justify.
Table Cell Vertical Align - Cell can be aligned vertically in top, middle and bottom.
Styles - It has two properties, Dashed Borders
used to style table border as dashed and Alternate Rows
used to highlight a selected row.
Point the cursor anywhere within the editor where you would like to insert the link. It is also possible to select a text within the editor and can be converted to a hyperlink. Click the Insert HyperLink
icon on the toolbar.
The insert link dialog has the following options,
Web Address - Type or paste the destination for the link you are creating.
Display Text - Type or edit the required text that you want to display text for the link.
Tooltip - To display additional helpful information when you place the pointer on the hyperlink, type the required text in the “Tooltip” field.
Open Link in New Window - Specify whether the given link will be open in the new window or not.
Quick Toolbar
Hyperlink contains quick toolbar which can be enable by clicking link.
The quick toolbar for the link has the following options,
Open - The given link page, will be open in new window.
Edit Link - Used to edit the link in the Rich Text Editor content.
Remove Link - Used to remove link from the content of Rich Text Editor.
Text Editor includes the ability for users to directly edit HTML code via Source Code
in the text area. If you made any modifications in the Source view directly, the changes will be reflected in the Text Editor’s content.
Click the Source Code
icon on the toolbar to switch code view as shown in below,
Clicking the preview
icon will switch to the editor view.
The code view allows you to pass <iframe>
tag to embed external web page as below,
Undo and redo tools allow you to edit the text by disregard/cancel the recently made changes and restore it to previous state. It is a useful tool to restore the performed action which got changed by mistake. By default, upto 30 actions can be undo/redo in the editor.
To undo and redo operations, do one of the following:
Press the undo/redo
button on the toolbar.
Press the Ctrl + Z/Ctrl + Y
combination on the keyboard.