Migration from Essential® JS 1

8 Dec 202424 minutes to read

This article describes the API migration process of Rich Text Editor control from Essential® JS 1 to Essential® JS 2.

Accessibility

Behavior API in Essential® JS 1 API in Essential® JS 2
Keyboard Navigation Property: allow-keyboard-navigation

<ej-rte allow-keyboard-navigation="true"></ej-rte> 		No separate Property for enable/disable keyboard navigation. Its enabled by default.
Localization Property: locale

<ej-rte locale="en-US"></ej-rte> 		Property: locale

<ejs-richtexteditor locale="en-US"></ejs-richtexteditor>
RTL Property: enable-rtl

<ej-rte enable-rtl="true "></ej-rte> 		Property: enableRtl

<ejs- Rich Text Editor enableRtl="true" ></ejs- richtexteditor>
Key Config Not Applicable Property: keyConfig

<ejs-richtexteditor keyConfig="@ViewBag.keyConfig"></ejs-richtexteditor>
Tab Key Navigation Property: enable-tab-Key-navigation

<ej-rte enable-tab-Key-navigation ="true"></ej-rte> 		Property: enableTabKey

<ejs-richtexteditor enableTabKey = "true"></ejs-richtexteditor>
Key Down Event: key-down

<ej-rte key-down="onKeydown"></ej-rte> 		Not Applicable
Key Up Event: key-up

<ej-rte key-up="onKeyup"></ej-rte> 		Not Applicable

Toolbar

Behavior API in Essential® JS 1 API in Essential® JS 2
showToolbar Property: show-toolbar

<ej-rte show-toolbar="true"></ej-rte> 		Property: enable

<ejs-richtexteditor id="defaultRTE"><e-richtexteditor-toolbarsettings enable = "true"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Tools item Property: tools

List<String> lists = new List<string>() { "unorderedList", "orderedList" };

<ej-rte id="rteSample"><e-tools lists="lists"></e-tools></ej-rte> 		Property: items

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Tools-list Property: tools-list

@{ List<String> toolsList = new List<string>() { "style", "lists", "doAction", "links", "images" };

<ej-rte tools-list="toolsList"></ej-rte> 		Property: items

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Toolbar Overflow Mode Property: toolbar-overflow-mode

<ej-rte toolbar-overflow-mode="popup"></ej-rte> 		Property: type

1.Expand

2.MultiRow

<ejs-richtexteditor><e-richtexteditor-toolbarsettings type="Expand"></e-richtexteditor-toolbarsettings></ejs-richtexteditor><ejs-richtexteditor><e-richtexteditor-toolbarsettings type="MultiRow"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Floating Toolbar Not Applicable Property: enableFloating

<ejs-richtexteditor><e-richtexteditor-toolbarsettings enableFloating = "true"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Floating Toolbar Offset Not Applicable Property: floatingToolbarOffset

<ejs-richtexteditor floatingToolbarOffset = "50"><e-richtexteditor-toolbarsettings enableFloating = "true"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Inline toolbar Not Applicable Property: inlineMode

<ejs-richtexteditor ><e-richtexteditor-toolbarsettings items = "@ViewBag.items" ><e-richtexteditor-inlinemode enable="true" onSelection="true"></e-richtexteditor-inlinemode></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Quick Toolbar Not Applicable Property: quicktoolbarsettings

1.image

2.link

3.table

4.clipboard

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items = "@ViewBag.items" ></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings image="@ViewBag.image"></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>
Enable Toolbar Item Method: enableToolbarItem()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.enableToolbarItem() 		Method: enableToolbarItem()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.enableToolbarItem();
Disable Toolbar Item Method: disableToolbarItem()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.disableToolbarItem() 		Method: disableToolbarItem()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.disableToolbarItem();
Remove Toolbar Item Method: removeToolbarItem()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.removeToolbarItem() 		Method: removeToolbarItem()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.removeToolbarItem()
Toolbar Click Not Applicable Event: toolbar-click

<ejs-richtexteditor toolbarClick= "onToolbarClick"></ejs-richtexteditor>
Show Full Screen Not Applicable Method: showFullScreen()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. showFullScreen()

Custom Formats and Fonts

Behavior API in Essential® JS 1 API in Essential® JS 2
Format Property: format

<ej-rte format="viewBag.format"></ej-rte> 		Property: format

<ejs-richtexteditor><e-richtexteditor-format default="pPragraph" width="70px" types="items"></e-richtexteditor-format><e-richtexteditor-toolbarsettings items = "@ViewBag.items"><e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Font Size Property: font-size

<ej-rte font-size="viewBag.fontSize"></ej-rte> 		Property: fontSize

<ejs-richtexteditor><e-richtexteditor-fontsize width="40px" default="10", types="items"></e-richtexteditor-fontsize><e-richtexteditor-toolbarsettings items = "@ViewBag.items" ></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Font Family Property: font-name

<ej-rte font-name="viewBag.fontName"></ej-rte> 		Property: fontFamily

<ejs-richtexteditor><e-richtexteditor-fontfamily width="100px" default="0" types="items"></e-richtexteditor-fontfamily><e-richtexteditor-toolbarsettings items = "@ViewBag.items" ></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Show Font Option Property: show-font-option

<ej-rte show-font-option = "true"></ej-rte> 		Property: fontFamily

<ejs-richtexteditor><e-richtexteditor-fontfamily width="70px" default="0", types="items"></e-richtexteditor-fontfamily><e-richtexteditor-toolbarsettings items = "@ViewBag.items" ></e-richtexteditor-toolbarsettings></ejs-richtexteditor>

Custom Font Colors

Behavior API in Essential® JS 1 API in Essential® JS 2
Font Color Property: color-code

<ej-rte color-code="viewBag.colorCode"></ej-rte> 		Property: fontColor

<ejs-richtexteditor><e-richtexteditor-fontcolor modeSwitcher="true" default="#fff"></e-richtexteditor-fontcolor><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Background Color Not Applicable Property: BackgroundColor

<ejs-richtexteditor><e-richtexteditor-backgroundcolor modeSwitcher="true" default= "#fff" mode= "Palette" columns="10" ></e-richtexteditor-backgroundcolor><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Color Palette Columns Property: color-code

<ej-rte color-palette-columns="10"></ej-rte> 		Property: BackgroundColor

<ejs-richtexteditor><e-richtexteditor-backgroundcolor columns="10" ></e-richtexteditor-backgroundcolor><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Color Palette Rows Property: color-palette-rows

<ej-rte color-palette-rows="6"></ej-rte> 		Not Applicable
Color Picker Type Method: setColorPickerType ()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.setColorPickerType("picker") 		Property: Mode

<ejs-richtexteditor ><e-richtexteditor-backgroundcolor mode="Palette" ></e-richtexteditor-backgroundcolor><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Behavior API in Essential® JS 1 API in Essential® JS 2
Link Not Applicable Property: CreateLink

viewBag.item = new[] {"CreateLink"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Quick Toolbar Not Applicable Property: link

viewBag.link = new [] {Open, Edit, UnLink}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings link="@ViewBag.link"></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>

Image

Behavior API in Essential® JS 1 API in Essential® JS 2
Image Not Applicable Property: Image

viewBag.item = new[] {"Image"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings tems="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Quick Toolbar Not Applicable Property: image

viewBag.link = new [] {"Replace", "Align", "Caption", "Remove", "-", "InsertLink","OpenImageLink", "EditImageLink", "RemoveImageLink", "Display", "AltText", "Dimension"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings image="@ViewBag.image"></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>
Image Setting Property: Images

List<String> images = new List<string>() { "image" };

<ej-rte><e-tools images="images"></e-tools></ej-rte> 		Property: insrtImageSettings

<ejs-richtexteditor><e-richtexteditor-insertimagesettings display="inline"></e-richtexteditor-insertimagesettings><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings image="@ViewBag.image"></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>

Table

Behavior API in Essential® JS 1 API in Essential® JS 2
Table Not Applicable Property: CreateTable

viewBag.item = new[] {"CreateTable"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Quick Toolbar Not Applicable Property: table

viewBag.table = new [] {"TableHeader", "TableRows", "TableColumns", "BackgroundColor", "-", "TableRemove", "Alignments", "TableCellVerticalAlign", "Styles" }

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings table="@ViewBag.table"></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>
Table Setting Property: table-columns, table-rows

<ej-rte table-columns="10"></ej-rte>

<ej-rte table-rows = "10"></ej-rte> 		Property: tableSettings

<ejs-richtexteditor><e-richtexteditor-tableSettings width="80%"></e-richtexteditor-tableSettings><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings table="@ViewBag.table"></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>
Custom table Property: show-custom-table

<ej-rte show-custom-table="true"></ej-rte> 		Not Applicable
Insert Column Method: insertColumn([before],[cell])

var rteObj = $("#rte ").data("ejRTE ");

rteObj.insertColumn(true, "<td></td>") 		Property: TableColumns

viewBag.table = new [] {"TableColumns"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings table ="@ViewBag.table "></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>
Insert Row Method: insertRow([before],[cell])

var rteObj = $("#rte ").data("ejRTE ");

rteObj.insertRow(true, "<tr></tr>") 		Property:

TableRows viewBag.table = new [] {"TableRows"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings table ="@ViewBag.table"></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>
Remove Table Method: removeTable([table])

var rteObj = $("#rte").data("ejRTE ");

rteObj.removeTable("table") 		Property: TableRemove

viewBag.table = new [] {"TableRemove"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items = "@ViewBag.items"></e-richtexteditor-toolbarsettings><e-richtexteditor-quicktoolbarsettings table ="@ViewBag.table "></e-richtexteditor-quicktoolbarsettings></ejs-richtexteditor>

Counts

Behavior API in Essential® JS 1 API in Essential® JS 2
Character Count Property: show-char-count

<ej-rte show-char-count="true"></ej-rte> 		Property: showCharCount

<ejs-richtexteditor showCharCount = "true"><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Word Count Property: show-word-count

<ej-rte show-word-count="true"></ej-rte> 		Not Applicable
Maximum Length Property: max-length

<ej-rte max-length ="1000"></ej-rte> 		Property: maxLength

<ejs-richtexteditor maxLength = "1000"></ejs-richtexteditor>

Iframe

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable Iframe By Default, enabled Property: iframeSettings

<ejs-richtexteditor id="iframe" value="@ViewBag.value"><e-richtexteditor-iframesettings enable="true"></e-richtexteditor-iframesettings></ejs-richtexteditor>
Attributes Property: iframe-attributes

<ej-rte iframe-attributes="viewBag.attribute"></ej-rte> 		Property: attributes

<ejs-richtexteditor id="iframe" value="@ViewBag.value"><e-richtexteditor-iframesettings enable="true"></e-richtexteditor-iframesettings></ejs-richtexteditor>

<script>var iframeRTE; function created() {

iframeRTE = this;

this.setProperties({

iframeSettings: { enable: true, attributes: { readonly: "readonly"} } }, false); }

</script>
Resource Property: external-CSS

<ej-rte external-CSS ="defult.css"></ej-rte> 		Property: attributes

<ejs-richtexteditor id="iframe" value="@ViewBag.value"><e-richtexteditor-iframesettings enable="true"></e-richtexteditor-iframesettings></ejs-richtexteditor>

<script>

var iframeRTE;

function created() {

iframeRTE = this;

this.setProperties({ iframeSettings: { enable: true, resources: { styles: ["myStyle.css"]}}}, false);}

</script>

Editor Mode

Behavior API in Essential® JS 1 API in Essential® JS 2
Editor Mode Not Applicable Property: editorMode

1.HTML

2.Markdown

<ejs-richtexteditor editorMode = "HTML"></ejs-richtexteditor>

Undo

Behavior API in Essential® JS 1 API in Essential® JS 2
Undo Stack Limit Property: undo-stack-limit

<ej-rte undo-stack-limit ="50"></ej-rte> 		Property: undoRedoSteps

<ejs-richtexteditor undoRedoSteps = "30"></ejs-richtexteditor>
Undo Redo Timer Not Applicable Property: undoRedoTimer

<ejs-richtexteditor undoRedoTimer = "300"></ejs-richtexteditor>

Common

Behavior API in Essential® JS 1 API in Essential® JS 2
Allow Editing Property: allow-editing

<ej-rte allow-editing="true"></ej-rte> 		Property: readonly

<ejs-richtexteditor readonly = "true"></ejs-richtexteditor>
Auto Focus Property: auto-focus

<ej-rte auto-focus="false"></ej-rte> 		Not Applicable
Auto Height Property: auto-height

<ej-rte auto-height="true"></ej-rte> 		Not Applicable
Paste Clean Up Property: paste-cleanup-settings

<ej-rte><e-paste-cleanup-settings clean-css="true" list-conversion="true" remove-styles="true" clean-elements="true" /></ej-rte> 		Not Applicable
Css Class Property: css-class

<ej-rte css-class="customStyle"></ej-rte> 		Property: cssClass

<ejs-richtexteditor cssClass = "customStyle"></ejs-richtexteditor>
Enabled Property: enabled

<ej-rte enabled="true"></ej-rte> 		Property: enabled

<ejs-richtexteditor enabled = "true"></ejs-richtexteditor>
Html Encode Property: enable-html-encode

<ej-rte enable-html-encode="true"></ej-rte> 		Property: enableHtmlEncode

<ejs-richtexteditor enableHtmlEncode = "true"></ejs-richtexteditor>
Persistence Property: enable-persistence

<ej-rte enable-persistence ="true"></ej-rte> 		Property: enablePersistence

<ejs-richtexteditor enablePersistence = "true"></ejs-richtexteditor>
Resize Property: enable-resize

<ej-rte enable-resize ="true"></ej-rte> 		Not Applicable
XHTML Property: enable-XHTML

<ej-rte enable-XHTML ="true"></ej-rte> 		Not Applicable
Height Property: height

<ej-rte height="350px"></ej-rte> 		Property: height

<ejs-richtexteditor height = "350px"></ejs-richtexteditor>
Width Property: width

<ej-rte width="500px"></ej-rte> 		Property: width

<ejs-richtexteditor width = "500px"></ejs-richtexteditor>
Html Attributes Property: html-attributes

<ej-rte html-attributes="viewBag.htmlAttr"></ej-rte> 		Property: htmlAttributes

<ejs-richtexteditor htmlAttributes = "viewBag.htmlAttr"></ejs-richtexteditor>
Is Responsive Property: is-responsive

<ej-rte is-responsive ="true"></ej-rte> 		No separate Property for responsive, provided default.
Maximum Height Property: max-height

<ej-rte max-height="500px"></ej-rte> 		Not Applicable
Maximum Width Property: max-width

<ej-rte max-width="700px"></ej-rte> 		Not Applicable
Minimum Height Property: min-height

<ej-rte min-height="300px"></ej-rte> 		Not Applicable
Minimum Width Property: min-width

<ej-rte min-width ="300px"></ej-rte> 		Not Applicable
name Property: name

<ej-rte name = "commentBlog"></ej-rte> 		Not Applicable
Clear All Property: show-clear-all

<ej-rte show-clear-all = "true"></ej-rte> 		Not Applicable
Clear Format Property: show-clear-format

<ej-rte show-clear-format = "true"></ej-rte> 		No separate Property for clear Format. Its Provided in toolbar command.

viewBag.item = new[] {"ClearFormat"}

<ejs-richtexteditor><e-richtexteditor-toolbarsettings items="viewBag.item"></e-richtexteditor-toolbarsettings></ejs-richtexteditor>
Place holder Not Applicable Property: placeholder

<ejs-richtexteditor placeholder="Enter Text"></ejs-richtexteditor>
Context Menu Property: show-context-menu

<ej-rte show-context-menu = "true"></ej-rte> 		Not Applicable
Dimensions Property: show-dimensions

<ej-rte show-dimensions = "true"></ej-rte> 		Not Applicable
Show Footer Property: show-footer

<ej-rte show-footer = "true"></ej-rte> 		Not Applicable
Html Source Property: show-html-source

<ej-rte show-html-source = "true"></ej-rte> 		Method: showSourceCode()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.showSourceCode();
Html Tag Info Property: show-html-tag-info

<ej-rte show-html-tag-info = "true"></ej-rte> 		Not Applicable
Rounded Corner Property: show-rounded-corner

<ej-rte show-rounded-corner = "true"></ej-rte> 		Not Applicable
Tooltip Property: tooltip-settings

<ej-rte tooltip-settings = "viewBag.tooltip"></ej-rte> 		Not Applicable
value Property: value

<ej-rte value = "ViewBag.value"></ej-rte> 		Property: value

<ejs-richtexteditor value="ViewBag.value"></ejs-richtexteditor>
Validation Rules Property: validation-rules

<ej-rte validation-rules= "ViewBag.validation"></ej-rte> 		Achieved in sample level.

https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/validation.html#validation-rules
Validation Message Property: validation-message

<ej-rte validation-message= "ViewBag.validation ></ej-rte> 		Achieved in sample level.

https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/validation.html#validation-message
Zoom Step Property: zoom-step

<ej-rte zoom-step = "0.5"></ej-rte> 		Not Applicable
Disable Method: disable()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.disable() 		Property: enabled

<ejs-richtexteditor enabled = "false"></ejs-richtexteditor>
Enable Method: enable()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.enable() 		Property: enabled

<ejs-richtexteditor enabled = "true"></ejs-richtexteditor>
Focus Method: focus()

var rteObj = $("#rte ").data("ejRTE ");

rteObj. focus() 		Method: focusIn()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. focusIn();
Focus Out Not Applicable Method: focusOut()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. focusOut();
Command Status Method: getCommandStatus()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.getCommandStatus() 		Not Applicable
Get Document Method: getDocument()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.getDocument() 		Not Applicable
Get Html Method: getHtml()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.getHtml() 		Method: getHtml()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. getHtml();
Get Text Method: getText()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.getText() 		Method: getContent()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. getContent();
Get Selected Html Method: getSelectedHtml()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.getSelectedHtml() 		Method: getSelection()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. getSelection();
Get Range Not Applicable Method: getRange()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. getRange();
Hide Method: hide()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.hide() 		Not Applicable
Show Method: show()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.show() 		Not Applicable
Insert Menu Option Method: insertMenuOption()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.insertMenuOption( {newItem:"Show Table Details",targetItem:"Table Properties", insertType:("insertAfter"), menuType:{text:false,image:false,hyperlink:false,table:true},spriteCssClass:"e-rte-toolbar-icon tableProperties"} ) 		Not Applicable
Paste Content Method: pasteContent(html)

var rteObj = $("#rte ").data("ejRTE ");

rteObj.pasteContent("Rich Text Editor content") 		Not Applicable
refresh Method: refresh()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.refresh() 		Method: refresh()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.refresh();
Select All Method: selectAll()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.selectAll() 		Method: selectAll()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.selectAll();
Select Range Method: selectRange()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.selectRange() 		Method: selectRange()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.selectRange();
Set Html Method: setHtml()

var rteObj = $("#rte ").data("ejRTE ");

rteObj.setHtml("rictexteditor content") 		Not Applicable
Destroy Not Applicable Method: destroy()

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj.destroy();
Change Event: change

<ej-rte change = "onChange"></ej-rte> 		Event: change

<ejs-richtexteditor change = "onChange"></ejs-richtexteditor>
create Event: create

<ej-rte create = "onCreate"></ej-rte> 		Event: created

<ejs-richtexteditor change = "onCreated"></ejs-richtexteditor>
Context Menu Click Event: contextMenuClick

<ej-rte contextMenuClick = "onClick"></ej-rte> 		Not Applicable
destroy Event: destroy

<ej-rte destroy = "onDestroy"></ej-rte> 		Event: destroyed

<ejs-richtexteditor destroyed = "onDestroy"></ejs-richtexteditor>
Pre Render Event: preRender

<ej-rte preRender = "onPreRender"></ej-rte> 		Not Applicable
Select Event: select

<ej-rte select = "onSelect"></ej-rte> 		Not Applicable
Focus Not Applicable Event: focus

<ejs-richtexteditor focus = "onFocus"></ejs-richtexteditor>

Execute Command

Behavior API in Essential® JS 1 API in Essential® JS 2
Execute Command Method: executeCommand(cmdName, args, [textnodeType])

var rteObj = $("#rte ").data("ejRTE ");

rteObj.executeCommand("bold", true) 		Method: executeCommand(cmdName, value)

var rteObj = document.getElementById('richtexteditor').ej2_Instances[0];

rteObj. executeCommand("Bold" );
Execute events Event: execute

<ej-rte execute = "onExecute"></ej-rte> 		Event: actionComplete

<ejs-richtexteditor actionComplete = "onActionComplete"></ejs-richtexteditor>
Before Execute Not Applicable Event: actionBegin

<ejs-richtexteditor actionBegin = "onActionBegin"></ejs-richtexteditor>