Configuration Reference
This page lists the available editor configuration options. See Configuration for setup patterns and usage guidance.
| Name | Default | Description |
|---|---|---|
| skin | default | Default, rounded-corner, gray or blue. Sets the skin for how the toolbar is draw. Create your custom skin or choose from predefined skins. |
| toolbar | default | Default, basic or full. Auto configures the toolbar with a set of buttons on desktop. |
| toolbarMobile | mobile | The toolbar set on mobile devices. |
| maxWidthForMobile | 992 | When the screen (browser window) gets smaller than 992, editor should have mobile toolbar. |
| timeoutAddToUndo | 900 | When uses types fast, wait 900ms to add undo item. |
| enableDragDrop | true | Enables or disables drag-and-drop support for the editor. |
| enableObjectResizing | true | Specifies whether or not to allow the users resize an object winthin the RichTextEditor. |
| readOnly | false | Gets or sets a value which indicates whether the RichTextEditor should be an active HTML editor, or a read-only document viewer. |
| focusOnLoad | false | Specifies whether the editor grabs focus when the page loads. If this property is set to true then the editor will take focus, if it is set to false it will not. |
| allowScriptCode | false | Specifies whether to strip all script elements and script contents from the html to prevent javaScript injection. When this property is set to false (the default) Rich Text Editor strips all script elements and script contents from the html. |
| tagWhiteList | [] | The white list contains a list of tags that can be used in the editor. |
| tagBlackList | [] | The black list contains a list of tags that cannot be used in the editor. |
| maxHTMLLength | 0 | Gets or sets the maximum number of characters including the HTML tags allowed in the RichTextEditor. Default is -1, indicating no maximum. |
| maxTextLength | 0 | Gets or sets the maximum number of characters excluding the HTML tags allowed in the RichTextEditor. Default is -1, indicating no maximum. |
| editorResizeMode | both" | both, height or none。 Gets or sets the resize mode. |
| toggleBorder | true | Specifies the ToggleBorder state. ToggleBorder is a handy function which allows you to see the borders without setting things to border = 1 or something like that in code. |
| showSelectedBlock | true | Specifies whether or not to display the selected block winthin the RichTextEditor. |
| showFloatTextToolBar | false | Specifies whether to display the FloatTextToolBar thar is defined by config.controltoolbar_TEXT. |
| showFloatLinkToolBar | false | Specifies whether to display the FloatLinkToolBar thar is defined by config.controltoolbar_A. |
| showFloatImageToolBbar | false | Specifies whether to display the FloatImageToolBbar thar is defined by config.controltoolbar_IMG. |
| showFloatTableToolBar | false | Specifies whether to display the FloatTableToolBar thar is defined by config.controltoolbar_TD. |
| showFloatParagraph | true | Specifies whether to display the FloatParagraph on the left side. |
| floatParagraphPos | left | Left or right. Gets or sets the position of FloatParagraph. |
| floatParagraphPosX | 0 | A Number, representing the horizontal coordinate of FloatParagraph, in pixels. |
| floatParagraphPosY | 0 | A Number, representing the vertical coordinate of FloatParagraph, in pixels. |
| showPlusButton | true | Specifies whether to display the editor plus button. |
| showTagList | true | Specifies whether to display the tag selector in the editor bottom bar. |
| showStatistics | true | Specifies whether to display the content statistics in the editor bottom bar. |
| tabSpaces | 4 | Gets or sets the number of spaces to be inserted when the user hits the "tab" key. |
| enterKeyTag | p | Determines what happens when the "enter" key is pressed in the editor. div, p or br. |
| paragraphClass | paragraph | The specified class name will be added to the paragraph automatically when to create a new paragraph. |
| insertTableTag | <table></table> | Default table attributes when inserting a table. |
| insertRowTag | <tr></tr> | Default row attributes when creating table row. |
| insertCellTag | <td><br/></td> | Default cell attributes when inserting a cell. |
| url_base | /richtexteditor | Specifies a base URL of richtexteditor. |
| contentCssUrl | %url_base%/runtime/ richtexteditor_content.css | Specifies the location of the style sheet that will be used by the editable area. |
| previewCssUrl | %url_base%/runtime/ richtexteditor_preview.css | Specifies the location of the style sheet that will be used by the preview window. |
| previewScriptUrl | %url_base%/runtime/ richtexteditor_preview.js | Specifies the location of javascript file that will be used by the preview window. |
| contentCssText | "" | Gets or sets inline CSS text that will be used by the editable area. For example, "body{background-color:#eee}". |
| previewCssText | "" | Gets or sets inline CSS text that will be used by the preview window. For example, "body{background-color:#eee}". |
| editorBodyCssClass | "" | Gets or sets the class of editing area to switch styles. |
| editorBodyCssText | "" | Gets or sets inline CSS text that will be used by the editable body. |
| editablePaddingTop | 2 | Sets the top padding (space) of the editable area. |
| editablePaddingBottom | 2 | Sets the bottom padding (space) of the editable area. |
| editablePaddingLeft | 2 | Sets the left padding (space) of the editable area. |
| editablePaddingRight | 2 | Sets the right padding (space) of the editable area. |
| zIndexFullPage | 9999 | Set the z-index for the editor opens in fullscreen mode. |
| zIndexFloat | 99999 | Set the z-index for the editor float toolbar. |
| zIndexDialog | 999999 | Set the z-index for the editor dialog. |
| zIndexDropDown | 9999999 | Set the z-index for the editor dropDown. |
| fontNameDropDownMinWidth | 90px | Set the min-width for the fontname dropDown. |
| fontNameDropDownMaxWidth | 110px | Set the max-width for the fontname dropDown. |
| tooltipAttribute | rte-tooltip | Set the attribute for the editor tooltip. |
| controlSelectionClass | rte-control-selected | Set the Class for the editor control selection. |
| controlSelectionMargin | 7 | Set the Margin for the editor control selection. |
Dropdown Customization
| Name | Default | Description |
|---|---|---|
| paragraphItems | Normal,H1,H2,H3,H4,H5,H6 | A predefined set of format blocks. |
| fontSizeItems | 8,9,10,11,12,13,14,16, 18,24,36,48,60,72,96 | A predefined set of font sizes. |
| fontNameItems | Arial,Arial Black,Comic Sans MS, Courier New,Tahoma,Georgia,Helvetica, Segoe UI,Sans-Serif,Impact, Times New Roman,Verdana | A predefined set of font names. |
| lineHeightItems | 100%,150%,200%,250%,300%, 350%,400%,450%,500%,600% | A predefined set of line height items. |
| inlineStyles | [["Red", "color:red", "color:red"], ["Bold", "font-weight:bold", "font-weight:bold"], ["Mark", "my-cls-mark"], ["Warning", "my-cls-warning"]] | Default CSS styles for inline styles dropdown. [text,css style, display style] |
| paragraphStyles | [["Red", "color:red"], ["Bold", "font-weight:bold"], ["Quote", "my-cls-quote"], ["LargeCenter", "my-cls-largecenter"]] | Default CSS styles for paragraph styles dropdown. [text,css style, display style] |
| imageStyles | [["Border", "border:solid 1px gray"], ["Shadow", "box-shadow:0 0 8px gray"], ["Margin10", "margin:10px"], ["Padding:10", "padding:10px"]] | Default CSS styles for image Styles dropdown. [text,css style] |
| linkStyles | [["Margin10", "margin:10px"], ["Padding:10", "padding:10px"], ["BigText", "font-size:36px"]] | Default CSS styles for link Styles dropdown. [text,css style] |
| galleryImages | [ "http://richtexteditor.com/uploads/1.jpg", "http://richtexteditor.com/uploads/2.jpg", "http://richtexteditor.com/uploads/3.jpg", "http://richtexteditor.com/uploads/4.jpg", "http://richtexteditor.com/uploads/5.jpg", "http://richtexteditor.com/uploads/6.jpg" ] // For insert image by URL | Default images for gallery Images dialog. |
| htmlTemplates | ["My Doc 1", "<h3>Title 1</h3>"], ["My Doc 2", "<h3>Title 2</h3>"] | Default html Templates for html Templates dialog. |
| characterItems | A predefined set of characters. | |
| foreColorItems | A predefined set of fore colors. | |
| backColorItems | A predefined set of background colors. | |
| linkItems | A predefined set of links for link dialog. | |
| imageItems | Default images for inserting image by URL dialog. |