Interface IRichTextDialogConfig

The dialog providing text formatting options.

Package: @aurigma/design-editor-iframe

Remarks

For details, see the Rich text editor topic.

Examples

configuration = {
   widgets: {
       RichTextDialog: {
           bgColor: "lightgray",
           ckeditorConfig:{
               specialChars: [""", "’", [ "@", "Custom label" ] ]
           },
           fitTextRectangle: {
               onAdd: "shrinkOrStretchToContentHeight",
               onUpdate: "stretchToContentHeight"
           },
           richComboValues: {
               padding: { max: 50, min: 5, step: 5 }
           },
           textOutline: {
               enabled: true
           },
           toolbarConfig: [
               { name: "clipboard", items: ["Cut", "Copy", "Paste", "-", "Undo", "Redo"] }, "/",
               { name: "basicstyles", items: ["Bold", "Italic", "Underline", "-", "RemoveFormat"] }
           ],
           wysiwygMode: true
       }
   }
};

Properties

applyToAllTextMode

Allows you to apply formatting to a whole text field despite a text selection. This text mode is turned off by default.

Declaration

applyToAllTextMode?: boolean;

Property Value

Type	Description
boolean	Allows you to apply formatting to a whole text field despite a text selection. This text mode is turned off by default.

bgColor

The text background color in the Rich text dialog. The default value is "white".

Declaration

bgColor?: string;

Property Value

Type	Description
string	The text background color in the Rich text dialog. The default value is "white".

ckeditorConfig

An array defining the **Special character** list. The default list is:

["!", """, "#", "$", "%", "&", "'", "(", ")", "*", "+", "-", ".", "/",
 "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=", ">", "?", "@",
 "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R","S",
 "T", "U", "V", "W", "X", "Y", "Z", "[", "]", "^", "_", "`", "a", "b", "c", "d", "e", "f", "g",
 "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
 "{", "|", "}", "~", "€", "‘", "’", "“", "”", "–", "—",
 "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©",
 "ª", "«", "¬", "®", "¯", "°", "²", "³", "´",
 "µ", "¶", "·", "¸", "¹", "º", "»", "¼",
 "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä",
 "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì",
 "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô",
 "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü",
 "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä",
 "å", "æ", "ç", "è", "é", "ê", "ë", "ì",
 "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô",
 "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü",
 "ý", "þ", "ÿ", "Œ", "œ", "Ŵ", "&#374", "&#373", "ŷ",
 "‚", "‛", "„", "…", "™", "►", "•", "→", "⇒",
 "⇔", "♦", "≈"]

Declaration

ckeditorConfig?: any;

Property Value

Type

Description

any

An array defining the **Special character** list. The default list is: ["!", """, "#", "$", "%", "&", "'", "(", ")", "*", "+", "-", ".", "/", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=", ">", "?", "@", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R","S", "T", "U", "V", "W", "X", "Y", "Z", "[", "]", "^", "_", "`", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "{", "|", "}", "~", "€", "‘", "’", "“", "”", "–", "—", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "®", "¯", "°", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Ŵ", "&#374", "&#373", "ŷ", "‚", "‛", "„", "…", "™", "►", "•", "→", "⇒", "⇔", "♦", "≈"]

createMultiColumnText

Allows for creating multicolumn text. If true, the **Columns** drop-down list appears in the **Top toolbar** for formatted text elements. The default value is false.

Declaration

createMultiColumnText?: boolean;

Property Value

Type	Description
boolean	Allows for creating multicolumn text. If true, the **Columns** drop-down list appears in the **Top toolbar** for formatted text elements. The default value is false.

fitTextRectangle

Allows for fitting the bounding rectangle to the text size.

Declaration

fitTextRectangle?: IFitTextRectangleSettings;

Property Value

Type	Description
IFitTextRectangleSettings	Allows for fitting the bounding rectangle to the text size.

forcePasteAsPlainText

internal

Declaration

forcePasteAsPlainText?: boolean;

Property Value

Type	Description
boolean	internal

richComboValues

An object defining the indent and padding values for the Rich text dialog.

Declaration

richComboValues?: IRichComboValuesConfig;

Property Value

Type	Description
IRichComboValuesConfig	An object defining the indent and padding values for the Rich text dialog.

showHint

Enables hints in the drop-down lists. By default, the hints are enabled.

Declaration

showHint: IShowHintSettings;

Property Value

Type	Description
IShowHintSettings	Enables hints in the drop-down lists. By default, the hints are enabled.

showInput

Enables user input in the drop-down lists. By default, the user input is enabled.

Declaration

showInput?: IShowInputSettings;

Property Value

Type	Description
IShowInputSettings	Enables user input in the drop-down lists. By default, the user input is enabled.

textOutline

Enables the text outline for low-contrast texts in the Rich text dialog. The feature is turned off by default.

Declaration

textOutline?: ITextOutline;

Property Value

Type	Description
ITextOutline	Enables the text outline for low-contrast texts in the Rich text dialog. The feature is turned off by default.

toolbarConfig

An array defining configuration of the toolbar. The default configuration is:

[
{ name: "clipboard", items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"] },
{ name: "editing", items: ["Find", "Replace", "-", "SelectAll"] },
{ name: "insert", items: ["SpecialChar"] },
"/",
{ name: "basicstyles", items: ["Bold", "Italic", "Underline", "-", "RemoveFormat"] },
{ name: "styles", items: ["Font", "FontStyle", "FontSize"] },
{ name: "colors", items: ["cc_textcolor_button"] },
{ name: "tracking", items: ["cctracking"] },
"/",
{ name: "paragraph", items: ["JustifyLeft", "JustifyCenter", "JustifyRight"] },
{ name: "lists", items: ["NumberedList", "BulletedList"] },
{ name: "customerscanvas", items: ["ccleading", "cctextindent"] },
"/",
{ name: "customerscanvas", items: ["ccpaddingtop", "ccpaddingbottom", "ccpaddingleft", "ccpaddingright"] }
]

Declaration

toolbarConfig?: ({
        name: string;
        items: string[];
    } | string)[];

Property Value

Type

Description

({ name: string; items: string[]; } | string)[]

An array defining configuration of the toolbar. The default configuration is: [ { name: "clipboard", items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"] }, { name: "editing", items: ["Find", "Replace", "-", "SelectAll"] }, { name: "insert", items: ["SpecialChar"] }, "/", { name: "basicstyles", items: ["Bold", "Italic", "Underline", "-", "RemoveFormat"] }, { name: "styles", items: ["Font", "FontStyle", "FontSize"] }, { name: "colors", items: ["cc_textcolor_button"] }, { name: "tracking", items: ["cctracking"] }, "/", { name: "paragraph", items: ["JustifyLeft", "JustifyCenter", "JustifyRight"] }, { name: "lists", items: ["NumberedList", "BulletedList"] }, { name: "customerscanvas", items: ["ccleading", "cctextindent"] }, "/", { name: "customerscanvas", items: ["ccpaddingtop", "ccpaddingbottom", "ccpaddingleft", "ccpaddingright"] } ]

wysiwygMode

If true, the editor adjusts the text in the Rich text dialog to the appearance on the canvas as close as possible. The default value is false.

Declaration

wysiwygMode?: boolean;

Property Value

Type	Description
boolean	If true, the editor adjusts the text in the Rich text dialog to the appearance on the canvas as close as possible. The default value is false.

zoom

A structure containing text zoom configuration.

Declaration

zoom?: IZoomConfig;

Property Value

Type	Description
IZoomConfig	A structure containing text zoom configuration.