Formatted Label Editor

• Mar 29, 2024
• 3 minutes to read

The Formatted Label editor allows you to edit an unbound formatted label using BBCode-inspired markup tags and built-in text formatting options.

To invoke the Formatted Label editor, do one of the following:

• Double-click the formatted label control.

• Select the control, right-click it and choose Edit… in its context menu.

• Click the Caption property’s ellipsis button in the Object Inspector.

The Formatted Label Editor UI includes:

• A toolbar

• The Markup Editor” tab

• The “RTF Editor” tab

Select a text and click a toolbar button or press the corresponding key combination in any editor to apply a formatting option. The editors allow you to edit and preview text as:

Tab	Description
Markup Editor	A source string where you can type all supported BBCode-inspired tags.
RTF Editor	A result string that you can edit in WYSIWYG mode.

Options include:

Button	Description	BBCode Example	Example
	Bolds the text. Shortcut: Ctrl+B	[B]DevExpress[/B]
	Italicizes the text. Shortcut: Ctrl+I.	[I]DevExpress[/I]
	Underlines the text. Shortcut: Ctrl+U.	[U]DevExpress[/U]
	Strikes out the text.	[S]DevExpress[/S]
	Converts the text to subscript text. Shortcut: Ctrl+Equals sign.	Dev[Sub]Express[/Sub]
	Converts the text to superscript text. Shortcut: Shift+Ctrl+Equals sign.	Dev[Sup]Express[/Sup]
	Invokes the Font dialog that you can use to adjust font settings. The code example shows how to apply specific font size and typeface to the target text in the Markup Editor.	Dev[U][Font=Consolas][Size=12]Express[/U][/Font][/Size]
	Invokes the “Color Picker” dialog that you can use to choose a font color. To apply an RGB color manually, specify its code as the Color element’s parameter in the hexadecimal format, or omit the “cl” or “clWeb” prefix in a Normal/System or Web VCL color constant name and use it as a color name.	[Color=#E67E22]Dev[/Color][Color=Gray]Express[/Color]
	Invokes the “Color Picker” dialog that you can use to specify a text’s background color. To apply an RGB color manually, specify its name as the Color element’s parameter in the hexadecimal format, or omit the “cl” or “clWeb” prefix in a Normal/System or Web VCL color constant name and use it as a color name.	[BackColor=Orange]DevExpress[/BackColor]
	Invokes the “Insert Hyperlink” dialog that allows you to insert a hyperlink into the label’s caption. To create a valid hyperlink manually, wrap the text in the tags and specify a URI scheme and the target path in the start tag without spaces after “=”. A click on the link invokes the default application associated with the link’s URI scheme.	[URL=http://www.devexpress.com/]DevExpress[/URL]
	Specifies the range in which all markup tags have no effect.	[NOPARSE][B]DevExpress[/B][/NOPARSE]

Parse routines interpret tag content as text if there is:

• A space between the tag name and “=”.

• No end tag after a start tag.

The editor’s parser is case-insensitive, so you can use upper- and lowercase characters in tag text.

//BBCode:
  [COLOR=Gray]DEV[/cOlor][color=ORANGE]EXPRESS[/Color]

Note that you can insert only one end tag after the same start tags with different parameters.

//BBCode:
  [SIZE=12]Dev[SIZE=18]Express[/SIZE]