Contents
- Accessibility
- Toolbar
- Custom Formats and Fonts
- Custom Font Colors
- Link
- Image
- Table
- Counts
- Iframe
- Editor Mode
- Undo
- Common
- Execute Command
Having trouble getting help?
Contact Support
Contact Support
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: quicktoolbarsettings1.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>
|
Link
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: linkviewBag.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: tableviewBag.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>
|