---
title: "Interface: IRichTextDialogConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IRichTextDialogConfig/"
---

# Interface: IRichTextDialogConfig

> The dialog providing text formatting options.

## Remarks

For details, see the [Rich text editor](https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rte.html) topic.

## Example

``` js
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

### forcePasteAsPlainText?

> `optional` **forcePasteAsPlainText?**: `boolean`

internal

***

### bgColor?

> `optional` **bgColor?**: `string`

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

***

### createMultiColumnText?

> `optional` **createMultiColumnText?**: `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`.

***

### applyToAllTextMode?

> `optional` **applyToAllTextMode?**: `boolean`

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

***

### wysiwygMode?

> `optional` **wysiwygMode?**: `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`.

***

### showHint

> **showHint**: [`IShowHintSettings`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IShowHintSettings.md)

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

***

### showInput?

> `optional` **showInput?**: [`IShowInputSettings`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IShowInputSettings.md)

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

***

### textOutline?

> `optional` **textOutline?**: [`ITextOutline`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.ITextOutline.md)

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

***

### toolbarConfig?

> `optional` **toolbarConfig?**: (`string` \| \{ `name`: `string`; `items`: `string`[]; \})[]

An array defining configuration of the toolbar. The default configuration is:
``` js
[
{ 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"] }
]
```

***

### ckeditorConfig?

> `optional` **ckeditorConfig?**: `any`

An array defining the **Special character** list. The default list is:
``` js
["!", """, "#", "$", "%", "&", "'", "(", ")", "*", "+", "-", ".", "/",
 "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", "ŷ",
 "‚", "‛", "„", "…", "™", "►", "•", "→", "⇒",
 "⇔", "♦", "≈"]
```

***

### zoom?

> `optional` **zoom?**: [`IZoomConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IZoomConfig.md)

A structure containing text zoom configuration.

***

### richComboValues?

> `optional` **richComboValues?**: [`IRichComboValuesConfig`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IRichComboValuesConfig.md)

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

***

### fitTextRectangle?

> `optional` **fitTextRectangle?**: [`IFitTextRectangleSettings`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IFitTextRectangleSettings.md)

Allows for fitting the bounding rectangle to the text size.