Search results

RichTextEditorModel

Interface for a class RichTextEditor

Properties

actionBegin

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.

actionComplete

EmitType<ActionCompleteEventArgs>

Triggers after command execution using toolbar items or executeCommand method.

blur

EmitType<Object>

Triggers when RichTextEditor is focused out.

change

EmitType<ChangeEventArgs>

Triggers only when RichTextEditor is blurred and changes are done to the content.

created

EmitType<Object>

Triggers when the RichTextEditor is rendered.

destroyed

EmitType<Object>

Triggers when the RichTextEditor is destroyed.

focus

EmitType<Object>

Triggers when RichTextEditor is focused in

resizeStart

EmitType<ResizeArgs>

Triggers only when start resize the image.

resizeStop

EmitType<ResizeArgs>

Triggers only when stop resize the image.

resizing

EmitType<ResizeArgs>

Triggers only when resizing the image.

toolbarClick

EmitType<Object>

Triggers when RichTextEditor Toolbar items is clicked.

backgroundColor

IColorProperties

Predefine the color palette that can be rendered for background color (text highlighted color) toolbar command.

cssClass

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.

editorMode

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

enableHtmlEncode

boolean

specifies the value whether the source code is displayed with encoded format.

enablePersistence

boolean

Enables or disables the persisting component’s state between page reloads. If enabled, the value of RichTextEditor is persisted

enableRtl

boolean

Specifies the direction of the RichTextEditor component. For cultures like Arabic, Hebrew, etc. direction can be switched to right to left

enableTabKey

boolean

Allows the tab key action in the RichTextEditor content.

enabled

boolean

Specifies a value that indicates whether the component is enabled or not.

floatingToolbarOffset

number

Preserves the toolbar at the top of the RichTextEditor on scrolling and specifies the offset of the floating toolbar from documents top position

fontColor

IColorProperties

Predefine the color palette that can be rendered for font color toolbar command .

fontFamily

IFontProperties

Predefine the font families that populate in font family dropdown list from the toolbar.

fontSize

IFontProperties

Predefine the font sizes that populate in font size dropdown list from the toolbar.

format

IFormatProperties

Predefine the collection of paragraph styles along with quote and code style that populate in format dropdown from the toolbar.

formatter

IFormatter

Customize keyCode to change the key value.

height

string | number

Specifies the height of the RichTextEditor component.

htmlAttributes

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.

iframeSettings

IFrameSettingsModel

Specifies the items to be rendered in an iframe mode, and it has the following properties.

  • enable - Set Boolean value to enable, the editors content is placed in an iframe and isolated from the rest of the page.
  • attributes - Custom style to be used inside the iframe to display content. This style is added to the iframe body.
  • resources - we can add both styles and scripts to the iframe.

    1. styles[] - An array of CSS style files to inject inside the iframe to display content
    2. scripts[] - An array of JS script files to inject inside the iframe

inlineMode

InlineModeModel

Enable or disable the inline edit mode.

  • enable - set boolean value to enable or disable the inline edit mode.
  • onSelection - If its set to true, upon selecting the text, the toolbar is opened in inline. If its set to false, upon clicking to the target element, the toolbar is opened.

insertImageSettings

ImageSettingsModel

Specifies the image insert options in RichTextEditor component and control with the following properties.

  • allowedTypes - Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.
  • display - Sets the default display for an image when it is inserted in to the RichTextEditor. Possible options are: ‘inline’ and ‘block’.
  • width - Sets the default width of the image when it is inserted in the RichTextEditor.
  • height - Sets the default height of the image when it is inserted in the RichTextEditor.
  • saveUrl - Provides URL to map the action result method to save the image.
  • path - Specifies the location to store the image.

keyConfig

Object

Customizes the key actions in RichTextEditor. For example, when using German keyboard, the key actions can be customized using these shortcuts.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

maxLength

number

Specifies the maximum number of characters allowed in the RichTextEditor component.

placeholder

string

Specifies the placeholder for the RichTextEditor’s content used when the RichTextEditor body is empty.

quickToolbarSettings

QuickToolbarSettingsModel

Specifies the items to be rendered in quick toolbar based on the target element.

  • It has following fields:
  • enable - set boolean value to show or hide the quick toolbar
  • actionOnScroll - it has two possible options

    1. hide: The quickToolbar is closed when the parent element is scrolled.
    2. none: The quickToolbar cannot be closed even the parent element is scrolled.
  • link - Specifies the items to be rendered in quick toolbar based on link element such as Open, Edit, and UnLink.
  • image - Specifies the items to be rendered in quick toolbar based on image element such as ‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ‘InsertLink’, ‘Display’, ‘AltText’, ‘Dimension’.
  • text - Specifies the items to be rendered in quick toolbar based on text element such as ‘Cut’, ‘Copy’, ‘Paste’.

readonly

boolean

The user interactions on the component are disabled, when set to true.

showCharCount

boolean

Sets Boolean value to enable or disable the display of the character counter.

tableSettings

TableSettingsModel

Specifies the table insert options in RichTextEditor component and control with the following properties.

  • styles - Class name should be appended by default in table element. It helps to design the table in specific CSS styles always when inserting in editor.
  • width - Sets the default width of the table when it is inserted in the RichTextEditor.
  • minWidth - Sets the default minWidth of the table when it is inserted in the RichTextEditor.
  • maxWidth - Sets the default maxWidth of the table when it is inserted in the RichTextEditor.
  • resize - To enable resize the table.

toolbarSettings

ToolbarSettingsModel

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.

  • enable: set boolean value to show or hide the toolbar.
  • enableFloating: Set Boolean value to enable or disable the floating toolbar. Preserves the toolbar at top of the RichTextEditor on scrolling.
  • type: it has two possible options

    1. Expand: Hide the overflowing toolbar items in the next row. Click the expand arrow to view overflowing toolbar items
    2. MultiRow: The toolbar overflowing items wrapped in the next row.
  • items: Specifies the array of items aligned horizontally in the toolbar.

    | and - can insert a vertical and horizontal separator lines in the toolbar.

undoRedoSteps

number

Specifies the count of undo history which is stored in undoRedoManager.

undoRedoTimer

number

Specifies the interval value in milliseconds that store actions in undoRedoManager. The minimum value is 300 milliseconds.

value

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.

valueTemplate

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

width

string | number

Specifies the width of the RichTextEditor.