RichTextEditor
represents the react RichTextEditor.
<RichTextEditor/>
Predefine the color palette that can be rendered for background color (text highlighted color) toolbar command.
Defaults to { columns: 5, colorCode: { ‘Custom’: [‘#ffff00’, ‘#00ff00’, ‘#00ffff’, ‘#ff00ff’, ‘#0000ff’, ‘#ff0000’, ‘#000080’, ‘#008080’, ‘#008000’, ‘#800080’, ‘#800000’, ‘#808000’, ‘#c0c0c0’, ‘#000000’, ”] }}
string
Specifies the CSS class name appended with the root element of the RichTextEditor. One or more custom CSS classes can be added to a RichTextEditor.
Defaults to null
string
Specifies the editing mode of the RichTextEditor.
HTML
- Render RichTextEditor as HTML editor using <IFRAME> element or content editable <div> element
or <textarea> element.
Markdown
- Render RichTextEditor as markdown editor using <textarea>.
Defaults to ‘HTML’
boolean
Enable enableAutoUrl
to accept the given URL (relative or absolute) without validating the URL for hyperlinks, otherwise
the given URL will automatically convert to absolute path URL by prefixing https://
for hyperlinks.
Defaults to false
boolean
specifies the value whether the source code is displayed with encoded format.
Defaults to false.
boolean
Enables or disables the persisting component’s state between page reloads. If enabled, the value of RichTextEditor is persisted
Defaults to false.
boolean
Enables or disables the resizing option in the editor. If enabled, the RichTextEditor can be resized by dragging the resize icon in the bottom right corner.
Defaults to false.
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Allows the tab key action in the RichTextEditor content.
Defaults to false
boolean
Specifies a value that indicates whether the component is enabled or not.
Defaults to true.
number
Preserves the toolbar at the top of the RichTextEditor on scrolling and specifies the offset of the floating toolbar from documents top position
Defaults to 0
Predefine the color palette that can be rendered for font color toolbar command .
Defaults to { columns: 10, colorCode: { ‘Custom’: [ ”, ‘#000000’, ‘#e7e6e6’, ‘#44546a’, ‘#4472c4’, ‘#ed7d31’, ‘#a5a5a5’, ‘#ffc000’, ‘#70ad47’, ‘#ff0000’, ‘#f2f2f2’, ‘#808080’, ‘#cfcdcd’, ‘#d5dce4’, ‘#d9e2f3’, ‘#fbe4d5’, ‘#ededed’, ‘#fff2cc’, ‘#e2efd9’, ‘#ffcccc’, ‘#d9d9d9’, ‘#595959’, ‘#aeaaaa’, ‘#acb9ca’, ‘#b4c6e7’, ‘#f7caac’, ‘#dbdbdb’, ‘#ffe599’, ‘#c5e0b3’, ‘#ff8080’, ‘#bfbfbf’, ‘#404040’, ‘#747070’, ‘#8496b0’, ‘#8eaadb’, ‘#f4b083’, ‘#c9c9c9’, ‘#ffd966’, ‘#a8d08d’, ‘#ff3333’, ‘#a6a6a6’, ‘#262626’, ‘#3b3838’, ‘#323e4f’, ‘#2f5496’, ‘#c45911’, ‘#7b7b7b’, ‘#bf8f00’, ‘#538135’, ‘#b30000’, ‘#7f7f7f’, ‘#0d0d0d’, ‘#161616’, ‘#212934’, ‘#1f3763’, ‘#823b0b’, ‘#525252’, ‘#7f5f00’, ‘#375623’, ‘#660000’] } }
Predefine the font families that populate in font family dropdown list from the toolbar.
Defaults to { default: ‘Segoe UI’, width: ‘65px’, items: [ { text: ‘Segoe UI’, value: ‘Segoe UI’ }, { text: ‘Arial’, value: ‘Arial,Helvetica,sans-serif’ }, { text: ‘Courier New’, value: ‘Courier New,Courier,monospace’ }, { text: ‘Georgia’, value: ‘Georgia,serif’ }, { text: ‘Impact’, value: ‘Impact,Charcoal,sans-serif’ }, { text: ‘Lucida Console’, value: ‘Lucida Console,Monaco,monospace’ }, { text: ‘Tahoma’, value: ‘Tahoma,Geneva,sans-serif’ }, { text: ‘Times New Roman’, value: ‘Times New Roman,Times,serif’ }, { text: ‘Trebuchet MS’, value: ‘Trebuchet MS,Helvetica,sans-serif’ }, { text: ‘Verdana’, value: ‘Verdana,Geneva,sans-serif’ } ]}
Predefine the font sizes that populate in font size dropdown list from the toolbar.
Defaults to { default: ‘10’, width: ‘35px’, items: [ { text: ‘8’, value: ‘8pt’ }, { text: ‘10’, value: ‘10pt’ }, { text: ‘12’, value: ‘12pt’ }, { text: ‘14’, value: ‘14pt’ }, { text: ‘18’, value: ‘18pt’ }, { text: ‘24’, value: ‘24pt’ }, { text: ‘36’, value: ‘36pt’ } ]}
Predefine the collection of paragraph styles along with quote and code style that populate in format dropdown from the toolbar.
Defaults to { default: ‘Paragraph’, width: ‘65px’, types: [ { text: ‘Paragraph’ }, { text: ‘Code’ }, { text: ‘Quotation’ }, { text: ‘Heading 1’ }, { text: ‘Heading 2’ }, { text: ‘Heading 3’ }, { text: ‘Heading 4’ }, { text: ‘Heading 5’ }, { text: ‘Heading 6’ } ]}
Customize keyCode to change the key value.
Defaults to null
string
| number
Specifies the height of the RichTextEditor component.
Defaults to “auto”
Object
Allows additional HTML attributes such as title, name, etc., and It will be accepts n number of attributes in a key-value pair format.
Defaults to {}.
Specifies the items to be rendered in an iframe mode, and it has the following properties.
resources - we can add both styles and scripts to the iframe.
Defaults to { enable: false, attributes: null, resources: { styles: [], scripts: [] }}
Enable or disable the inline edit mode.
Defaults to { enable: false, onSelection: true}
Specifies the image insert options in RichTextEditor component and control with the following properties.
Defaults to { allowedTypes: [‘.jpeg’, ‘.jpg’, ‘.png’], display: ‘inline’, width: ‘auto’, height: ‘auto’, saveFormat: ‘Blob’ saveUrl: null, path: null,}
Object
Customizes the key actions in RichTextEditor. For example, when using German keyboard, the key actions can be customized using these shortcuts.
Defaults to null
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
number
Specifies the maximum number of characters allowed in the RichTextEditor component.
Defaults to -1
Specifies the pasting options in RichTextEditor component and control with the following properties.
Defaults to { prompt: false, deniedAttrs: null, allowedStyleProps: [‘background’, ‘background-color’, ‘border’, ‘border-bottom’, ‘border-left’, ‘border-radius’, ‘border-right’, ‘border-style’, ‘border-top’, ‘border-width’, ‘clear’, ‘color’, ‘cursor’, ‘direction’, ‘display’, ‘float’, ‘font’, ‘font-family’, ‘font-size’, ‘font-weight’, ‘font-style’, ‘height’, ‘left’, ‘line-height’, ‘margin’, ‘margin-top’, ‘margin-left’, ‘margin-right’, ‘margin-bottom’, ‘max-height’, ‘max-width’, ‘min-height’, ‘min-width’, ‘overflow’, ‘overflow-x’, ‘overflow-y’, ‘padding’, ‘padding-bottom’, ‘padding-left’, ‘padding-right’, ‘padding-top’, ‘position’, ‘right’, ‘table-layout’, ‘text-align’, ‘text-decoration’, ‘text-indent’, ‘top’, ‘vertical-align’, ‘visibility’, ‘white-space’, ‘width’], deniedTags: null, keepFormat: true, plainText: false}
string
Specifies the placeholder for the RichTextEditor’s content used when the RichTextEditor body is empty.
Defaults to null.
Specifies the items to be rendered in quick toolbar based on the target element.
actionOnScroll - it has two possible options
Open
, Edit
, and UnLink
.Defaults to { enable: true, actionOnScroll: ‘hide’, link: [‘Open’, ‘Edit’, ‘UnLink’], image: [‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ’-’, ‘InsertLink’, ‘Display’, ‘AltText’, ‘Dimension’], text: [‘Cut’, ‘Copy’, ‘Paste’]}
boolean
The user interactions on the component are disabled, when set to true.
Defaults to false.
number
Specifies the saveInterval in milliseconds for autosave the value. The change event will be triggered if the content was changed from the last saved interval.
Defaults to 10000
boolean
Sets Boolean value to enable or disable the display of the character counter.
Defaults to false
Specifies the table insert options in RichTextEditor component and control with the following properties.
Defaults to { width: ‘100%’, styles: [{ text: ‘Dashed Borders’, class: ‘e-dashed-borders’, command: ‘Table’, subCommand: ‘Dashed’ },{ text: ‘Alternate Rows’, class: ‘e-alternate-rows’, command: ‘Table’, subCommand: ‘Alternate’ }],resize: true, minWidth: 0, maxWidth: null,}
Specifies the group of items aligned horizontally in the toolbar as well as defined the toolbar rendering type. By default, toolbar is float at the top of the RichTextEditor. When you scroll down, the toolbar will scroll along with the page on RichTextEditor with the specified offset value.
type: it has two possible options
items: Specifies the array of items aligned horizontally in the toolbar.
| and - can insert a vertical and horizontal separator lines in the toolbar.
itemConfigs: Modify the default toolbar item configuration like icon class.
By default, The toolbar is rendered with scrollable in mobile devices and does not support the toolbar type.
Defaults to { enable: true, enableFloating: true, type: ToolbarType.Expand, items: [‘Bold’, ‘Italic’, ‘Underline’, ’|’, ‘Formats’, ‘Alignments’, ‘OrderedList’, ‘UnorderedList’, ’|’, ‘CreateLink’, ‘Image’, ’|’, ‘SourceCode’, ‘Undo’, ‘Redo’], itemConfigs: {}}
number
Specifies the count of undo history which is stored in undoRedoManager.
Defaults to 30
number
Specifies the interval value in milliseconds that store actions in undoRedoManager. The minimum value is 300 milliseconds.
Defaults to 300
string
Specifies the value displayed in the RichTextEditor’s content area and it should be string. The content of RichTextEditor can be loaded with dynamic data such as database, AJAX content, and more.
Defaults to null
string
Accepts the template design and assigns it as RichTextEditor’s content. The built-in template engine which provides options to compile template string into a executable function. For EX: We have expression evolution as like ES6 expression string literals
Defaults to null
string
| number
Specifies the width of the RichTextEditor.
Defaults to ‘100%’
Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
Returns void
Disables the given toolbar items in the RichTextEditor component.
Parameter | Type | Description |
---|---|---|
items | string | string[] |
Specifies the single or collection of items that you want to be disable in Rich Text Editor’s Toolbar. |
muteToolbarUpdate (optional) | boolean |
enable/disables the toolbar item status in RichTextEditor. |
Returns void
Enables the give toolbar items in the RichTextEditor component.
Parameter | Type | Description |
---|---|---|
items | string | string[] |
Specifies the single or collection of items that you want to be enable in Rich Text Editor’s Toolbar. |
muteToolbarUpdate (optional) | boolean |
enable/disables the toolbar item status in RichTextEditor. |
Returns void
Executes the commands
Returns void
Focuses the RichTextEditor component
Returns void
Blurs the RichTextEditor component
Returns void
Returns the maximum number of characters in the Rich Text Editor.
Returns number
Returns the HTML or Text inside the RichTextEditor.
Returns Element
Retrieves the HTML from RichTextEditor.
Returns string
Get the selected range from the RichTextEditor’s content.
Returns Range
Retrieves the HTML markup content from currently selected content of RichTextEditor.
Returns string
Returns the text content as string.
Returns string
By default, prints all the pages of the RichTextEditor.
Returns void
Refresh the view of the editor.
Returns void
Removes the give toolbar items from the RichTextEditor component.
Parameter | Type | Description |
---|---|---|
items | string | string[] |
Specifies the single or collection of items that you want to be remove from Rich Text Editor’s Toolbar. |
Returns void
This method will clean up the HTML against cross-site scripting attack and return the HTML as string.
It’s only applicable to editorMode as HTML
.
Parameter | Type | Description |
---|---|---|
value | string |
Specifies the value that you want to sanitize. |
Returns string
Selects all the content in RichTextEditor
Returns void
Selects a content range or an element
Parameter | Type | Description |
---|---|---|
range | Range |
Specify the range which you want to select within the content. The method used to select a particular sentence or word or entire document. |
Returns void
Shows the RichTextEditor component in full-screen mode.
Returns void
Shows the source HTML/MD markup.
Returns void
EmitType<ActionBeginEventArgs>
Triggers before command execution using toolbar items or executeCommand method. If you cancel this event, the command cannot be executed. Set the cancel argument to true to cancel the command execution.
EmitType<ActionCompleteEventArgs>
Triggers after command execution using toolbar items or executeCommand method.
EmitType<BeforeOpenEventArgs>
Event triggers when the dialog is being opened. If you cancel this event, the dialog remains closed. Set the cancel argument to true to cancel the open of a dialog.
EmitType<BeforeQuickToolbarOpenArgs>
Event triggers when the quick toolbar is being opened.
EmitType<BeforeSanitizeHtmlArgs>
Event triggers before sanitize the value. It’s only applicable to editorMode as HTML
.
EmitType<Object>
Triggers when RichTextEditor is focused out.
Triggers only when RichTextEditor is blurred and changes are done to the content.
EmitType<Object>
Triggers when the RichTextEditor is rendered.
EmitType<Object>
Triggers when the RichTextEditor is destroyed.
EmitType<Object>
Event triggers after the dialog has been closed.
EmitType<Object>
Event triggers when a dialog is opened.
EmitType<Object>
Triggers when RichTextEditor is focused in
EmitType<RemovingEventArgs>
Event triggers when the selected image is cleared from the insert image dialog.
EmitType<SelectedEventArgs>
Event triggers when the image is selected or dragged into the insert image dialog.
EmitType<Object>
Event triggers when there is an error in the image upload.
EmitType<Object>
Event triggers when the image is successfully uploaded to the server side.
EmitType<UploadingEventArgs>
Event triggers when the selected image begins to upload in the insert image dialog.
EmitType<Object>
Event triggers after the quick toolbar has been closed.
EmitType<Object>
Event triggers when a quick toolbar is opened.
Triggers only when start resize the image.
Triggers only when stop resize the image.
Triggers only when resizing the image.
EmitType<Object>
Triggers when RichTextEditor Toolbar items is clicked.