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 | [ "https://richtexteditor.com/uploads/1.jpg", "https://richtexteditor.com/uploads/2.jpg", "https://richtexteditor.com/uploads/3.jpg", "https://richtexteditor.com/uploads/4.jpg", "https://richtexteditor.com/uploads/5.jpg", "https://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. |
Plugin options
The options above configure the core editor. Everything below is contributed by the bundled plugins in richtexteditor/plugins/. Set them the same way — in the constructor’s options object, or globally on RTE_DefaultConfig before an editor is created.
AI
Every AI surface is bring-your-own-key: the editor calls a function you supply and never talks to a provider itself.
| Option | Default | Description |
|---|---|---|
ghostText | false | Enable inline grey-text completion. Tab accepts, Esc dismisses. |
ghostTextResolver | null | async ({ before }) => string. Required for ghostText to do anything. |
aiToolkitReviewLegacyLayout | true | Use the previous AI Review drawer layout. |
aitoolkit_skip_auto_css | true | Skip auto-injection of the AI Toolkit stylesheet when you ship your own. |
Typing and authoring aids
Behaviour that fires as the author types. All can be switched off individually.
| Option | Default | Description |
|---|---|---|
autocorrectEnabled | true | Master switch for the autocorrect plugin. |
autocorrectCapitalize | true | Capitalise the first letter of a sentence. |
autocorrectSpelling | true | Apply the built-in common-misspelling list. |
autocorrectTypography | true | Smart quotes, dashes and ellipses. |
autocorrectReplacements | null | Your own { from: to } replacement map, merged with the built-ins. |
emojiAutocompleteEnabled | true | Type :shortcode: to insert an emoji. |
emojiShortcodes | { … } | Override or extend the shortcode-to-emoji map. |
foldHeadingsEnabled | true | Collapsible headings in the editing surface. |
typewriterModeEnabled | false | Keep the caret line vertically anchored while typing. |
typewriterAnchor | 0.5 | Where the caret line sits, 0 (top) to 1 (bottom). |
focusModeEnabled | false | Dim every block except the one holding the caret. |
dragHandleEnabled | true | Show the block drag handle in the gutter. |
dragHandleKeyboard | true | Allow keyboard block reordering (Alt+Up / Alt+Down). |
formattingMarkPilcrow | true | Show pilcrows when formatting marks are on. |
formattingMarkBlocks | true | Outline block boundaries when formatting marks are on. |
formattingMarkInvisibles | true | Reveal spaces, tabs and non-breaking spaces. |
permanentPenClass | "rte-pen" | Class applied to permanent-pen text. |
permanentPenStyle | { … } | Inline style object for permanent-pen text. |
titleCaseSmallWords | "a an and as at …" | Words left lowercase by Change Case → Title Case. |
formatPainterProperties | [ … ] | Which CSS properties the format painter copies. |
readabilityStats | true | Show reading-ease statistics in the status bar. |
localDraft | false | Keep a local draft so content survives an accidental reload. |
Blocks, structure and references
Structural content: callouts, columns, numbered lists, footnotes, cross-references and a table of contents.
| Option | Default | Description |
|---|---|---|
calloutTypes | [ … ] | Available callout kinds (info, warning, …). |
calloutDefaultType | "info" | Callout kind inserted when none is chosen. |
columnsDefaultCount | 2 | Columns created by the column block. |
legalListClass | "rte-legal-list" | Class applied to multi-level legal lists. |
legalListSeparator | "." | Separator between level numbers (1.1.1). |
legalListSuffix | "." | Trailing character after the last level. |
lineNumberStart | 1 | First line number. |
lineNumberInterval | 1 | Show every Nth line number. |
lineNumberRestart | "continuous" | "continuous" or restart per page. |
lineNumberGutter | 38 | Gutter width in pixels. |
footnotesTitle | "Footnotes" | Heading rendered above the footnote list. |
footnotesNumbering | "decimal" | Marker style for footnote numbering. |
footnotesMarkerPrefix | "" | Text before each footnote marker. |
footnotesMarkerSuffix | "" | Text after each footnote marker. |
crossRefFigureLabel | "Figure" | Label used when referencing a figure. |
crossRefTableLabel | "Table" | Label used when referencing a table. |
crossRefMissingText | "[reference not found]" | Shown when a cross-reference target is gone. |
tocTitle | "Contents" | Heading for the generated table of contents. |
tocMinLevel | 1 | Shallowest heading level included. |
tocMaxLevel | 3 | Deepest heading level included. |
tocPageNumbers | "auto" | Show page numbers in the table of contents. |
mathDialogSamples | [ … ] | Starter equations offered in the equation dialog. |
tableNumberSeries | "numeric" | Numbering series for table row numbers. |
tableNumberHeader | "#" | Header text for the row-number column. |
Page layout, export and import
Everything that turns the document into a file or a printed page. Export runs in the browser; nothing is uploaded.
| Option | Default | Description |
|---|---|---|
paginationEnabled | false | Show the document as discrete pages. |
pageFormat | "A4" | Page size used by pagination and export. |
pageOrientation | "portrait" | "portrait" or "landscape". |
pageMargins | { top: 1, right: 1, bottom: 1, left: 1 } | Margins in inches. |
paginationShowPageNumbers | true | Render page numbers in page view. |
paginationShowPageCount | true | Render "of N" alongside page numbers. |
docxExport | true | Enable .docx export (written in the browser, no server). |
wordExport | true | Enable the Word-compatible HTML export. |
documentImport | true | Enable .docx import. |
pdfExport | true | Enable the vector, tagged-PDF export. |
html2pdfScriptUrl | null | Path to html2pdf for the raster PDF path; omit to keep the vector path only. |
markdownExportEnabled | true | Enable Copy / Download as Markdown. |
emailWrapWidth | 640 | Table width used by the email-HTML export. |
emailInlineProperties | [ … ] | CSS properties inlined onto elements for email clients. |
watermarkText | "DRAFT" | Watermark text. |
watermarkImage | null | Image watermark; overrides the text watermark. |
watermarkMode | "tile" | "tile" or a single centred mark. |
watermarkOpacity | 0.18 | Watermark opacity, 0 to 1. |
watermarkAngle | -30 | Rotation in degrees. |
watermarkColor | "#94a3b8" | Watermark colour. |
watermarkFontSize | 48 | Watermark font size in pixels. |
watermarkPrint | false | Include the watermark when printing. |
Media, links and data
Resolvers let you supply your own data source. Each is a plain function, so your endpoint and credentials stay yours.
| Option | Default | Description |
|---|---|---|
autoEmbedEnabled | true | Turn a pasted YouTube or Vimeo URL into a responsive embed. |
autoEmbedResolver | null | (url) => https embed URL, or null to decline. Add your own providers. |
bookmarkResolver | null | (url) => metadata for link-preview cards. |
bookmarkFaviconService | "/favicon-proxy?domain=" | Favicon endpoint for bookmark cards. Point it at your own proxy. |
diagramResolver | null | Supply a Mermaid renderer; none is bundled. |
diagramSamples | [ … ] | Starter diagrams offered in the insert dialog. |
chipResolver | null | (query) => smart-chip items. |
chipDateFormat | null | Format string for date chips. |
mergeFields | [ … ] | Available merge fields. |
mergeFieldPrefix | "{{" | Opening delimiter. |
mergeFieldSuffix | "}}" | Closing delimiter. |
mergeFieldMissing | "placeholder" | What to render when a field has no value. |
Language, direction and accessibility
The editor ships 67 languages. Direction and accessibility behaviour are configurable on top.
| Option | Default | Description |
|---|---|---|
defaultTextDirection | null | "ltr", "rtl", or null to inherit. |
textDirectionAutoDetect | false | Detect direction from the text being typed. |
textDirectionSwapAlign | true | Mirror alignment when direction flips. |
rtlUserInterface | "auto" | Mirror the toolbar and dialogs for RTL locales. |
a11yEnhance | true | Accessible names and roles on editor chrome. |
dialogA11y | true | Focus trapping and labelling inside dialogs. |
keyboardA11y | true | Roving tabindex on toolbars so Tab escapes the editor. |
readAloudRate | 1.0 | Speech rate for read-aloud. |
readAloudHighlight | true | Highlight text as it is spoken. |
Content safety and checking
Filtering and validation. These are the options a security review will ask about.
| Option | Default | Description |
|---|---|---|
contentSanitizer | true | Allowlist filter on input, output and the live DOM. Leave it on. |
spellCheckEnabled | true | Mark the editable spellcheck="true" for the browser checker. |
spellCheckResolver | null | (text) => [{ word, offset, length, suggestions }] from any service you license. |
linkCheckResolver | null | (urls) => reachability results for the link checker. |
linkCheckMixedContent | true | Flag http:// links on an https:// page. |
linkCheckUnsafeSchemes | ["javascript:", "data:", …] | Schemes reported as unsafe. |