Examples

Configuration Reference

Here is a list of editor configurations. See Configuration to learn about how to set up configurations.

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./td>
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.