ASP.NET MVC
Demos
Support
Forum
Download
Search results

Migration from Essential JS 1

This article describes the API migration process of RichTextEditor component from Essential JS 1 to Essential JS 2.

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Keyboard Navigation Property: AllowKeyboardNavigation

@{Html.EJ().RTE("rteSample").AllowKeyboardNavigation(true).Render();}		 No separate Property for enable/disable keyboard navigation. Its enabled by default.
Localization Property: Locale

@{Html.EJ().RTE("rteSample").Locale("en-US").Render();}		 Property: Locale

@Html.EJS().RichTextEditor("default").Locale("en-US").Render()
RTL Property: EnableRtl

@{Html.EJ().RTE("rteSample").EnableRTL(true).Render();}		 Property: EnableRtl

@Html.EJS().RichTextEditor("rtl").EnableRtl(true).Render()
Key Config Not Applicable Property: KeyConfig

@Html.EJS().RichTextEditor("default").KeyConfig((object)ViewBag.keyConfig).Render()
Tab Key Navigation Property: EnableTabKeyNavigation

@{Html.EJ().RTE("rteSample").EnableTabKeyNavigation(true).Render();}		 Property: EnableTabKey

@Html.EJS().RichTextEditor("default").EnableTabKey(true).Render()
Key Down Event: KeyDown

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.KeyDown("onKeydown")).Render();}		 Not Applicable
Key Up Event: keyUp

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.keyUp("keyUp")).Render();}		 Not Applicable

Toolbar

Behavior API in Essential JS 1 API in Essential JS 2
showToolbar Property: ShowToolbar

@{Html.EJ().RTE("rteSample").ShowToolbar(true).Render();}		 Property: Enable

@Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).Height("720px").ToolbarSettings(e => { e.Enable(true); }).Render()
Tools item Property: Tools

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

@{Html.EJ().RTE("rteSample").Tools(tool => tool.Lists(lists)).Render();}		 Property: Items

@Html.EJS().RichTextEditor("customtool").ToolbarSettings(e => e.Items((object)ViewBag.items)).Render()
Tools-list Property: ToolsList

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

@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Render();}		 Property: Items

@Html.EJS().RichTextEditor("customtool").ToolbarSettings(e => e.Items((object)ViewBag.items)).Render()
Toolbar Overflow Mode Property: ToolbarOverflowMode

@{Html.EJ().RTE("rteSample").ToolbarOverflowMode(ToolbarOverflowMode.Inline).Render();}		 Property: Type

1.Expand

2.MultiRow

@Html.EJS().RichTextEditor("types").ToolbarSettings(e => { e.Type(Syncfusion.EJ2.RichTextEditor.ToolbarType.Expand); }).Render()
Floating Toolbar Not Applicable Property: EnableFloating

@Html.EJS().RichTextEditor("types").EnableFloating(true); }).Render()
Floating Toolbar Offset Not Applicable Property: FloatingToolbarOffset

@Html.EJS().RichTextEditor("types").EnableFloating(true); }).FloatingToolbarOffset(50).Render()
Inline toolbar Not Applicable Property: InlineMode

ViewBag.inlineModeData = new { enable = true, onSelection = true };

@Html.EJS().RichTextEditor("defaultRTE").Value((string)ViewBag.value).InlineMode((object)ViewBag.inlineModeData).ToolbarSettings(e => e.Items((object)ViewBag.items)).Render()
Quick Toolbar Not Applicable Property: Quicktoolbarsettings

1.image

2.link

3.table

4.clipboard

@Html.EJS().RichTextEditor("inline").ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Image((object)ViewBag.image); }).Format((object)ViewBag.width).Value((string)ViewBag.value).Render()
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: ToolbarClick

@Html.EJS().RichTextEditor("defaultRTE").ToolbarClick("onClick").Render()
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

@{Html.EJ().RTE("rteSample").Format(format).Render();}		 Property: Format

viewBag.format = new {default= "Paragraph", types = "items", width = "70px"}

@Html.EJS().RichTextEditor("defaultRTE").Format((object)ViewBag.format).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Font Size Property: FontSize

@{Html.EJ().RTE("rteSample").FontSize(size).Render();}		 Property: FontSize

viewBag.fontSize = new {default= "10", types = "items", width = "70px"}

@Html.EJS().RichTextEditor("defaultRTE").FontSize((object)ViewBag.fontSize).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Font Family Property: FontName

@{Html.EJ().RTE("rteSample").FontName(fontname).Render();}		 Property: FontFamily

viewBag.fontFamily = new {default= "0", types = "items", width = "70px"}

@Html.EJS().RichTextEditor("defaultRTE").FontFamily((object)ViewBag.fontFamily).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Show Font Option Property: ShowFontOption

@{Html.EJ().RTE("rteSample").ShowFontOption(true).Render();}		 Property: FontFamily

viewBag.fontFamily = new {default= "0", types = "items", width = "70px"}

@Html.EJS().RichTextEditor("defaultRTE").FontFamily((object)ViewBag.fontFamily).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()

Custom Font Colors

Behavior API in Essential JS 1 API in Essential JS 2
Font Color Property: ColorCode

@{Html.EJ().RTE("rteSample").ColorCode(colorCode).Render();}		 Property: FontColor

ViewBag.fontColor = { default: "#fff", ColorModeType: "Palette", columns: 10, modeSwitcher: false}

@Html.EJS().RichTextEditor("defaultRTE").FontColor((object)ViewBag.fontColor).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Background Color Not Applicable Property: BackgroundColor

ViewBag.backgroundColor = { default: "#fff", ColorModeType: "Palette", columns: 10, modeSwitcher: false}

@Html.EJS().RichTextEditor("defaultRTE").BackgroundColor((object)ViewBag.backgroundColor).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Color Palette Columns Property: ColorPaletteColumns

@{Html.EJ().RTE("rteSample").ColorPaletteColumns(10).Render();}		 Property: BackgroundColor

ViewBag.backgroundColor = {columns: 10}

@Html.EJS().RichTextEditor("defaultRTE").BackgroundColor((object)ViewBag.backgroundColor).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Color Palette Rows Property: ColorPaletteRows

@{Html.EJ().RTE("rteSample").ColorPaletteRows(6).Render();}		 Not Applicable
Color Picker Type Method: setColorPickerType ()

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

rteObj.setColorPickerType("picker")		 Property: ColorModeType

ViewBag.backgroundColor = { ColorModeType: "Palette"}

@Html.EJS().RichTextEditor("defaultRTE").BackgroundColor((object)ViewBag.backgroundColor).ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Behavior API in Essential JS 1 API in Essential JS 2
Link Not Applicable Property: CreateLink

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Quick Toolbar Not Applicable Property: Link

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Link((object)ViewBag.link); }).Render()

Image

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

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items).Render()
Quick Toolbar Not Applicable Property: Image

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Image((object)ViewBag.image); }).Render()
Image Setting Property: Images

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

@{Html.EJ().RTE("rteSample").Tools(tool=>tool.Image(image)).Render();}		 Property: InsrtImageSettings

@Html.EJS().RichTextEditor("image").ToolbarSettings(e => e.Items((object)ViewBag.items)).InsertImageSettings(obj=>obj.Display("inline")).Value((string)ViewBag.value).Render()

Table

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

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

@Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.items)).Render()
Quick Toolbar Not Applicable Property: Table

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).Render()
Table Setting Property: TableColumns, TableRows

@{Html.EJ().RTE("rteSample").TableColumns(10).Render();}

@{Html.EJ().RTE("rteSample").TableRows(10).Render();}		 Property: TableSettings

@Html.EJS().RichTextEditor("image").ToolbarSettings(e => e.Items((object)ViewBag.items)).TableSettings(obj=>obj.width("80%")).Render()
Custom table Property: ShowCustomTable

@{Html.EJ().RTE("rteSample").ShowCustomTable(true).Render();}		 Not Applicable
Insert Column Method: insertColumn([before],[cell])

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

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

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).Render()
Insert Row Method: insertRow([before],[cell])

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

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

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).Render()
Remove Table Method: removeTable([table])

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

rteObj.removeTable("table")		 Property: TableRemove

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

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).Render()

Counts

Behavior API in Essential JS 1 API in Essential JS 2
Character Count Property: ShowCharCount

@{Html.EJ().RTE("rteSample").ShowCharCount(true).Render();}		 Property: ShowCharCount

@Html.EJS().RichTextEditor("defaultRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).ShowCharCount(true).Render()
Word Count Property: ShowWordCount

@{Html.EJ().RTE("rteSample").ShowWordCount(true).Render();}		 Not Applicable
Maximum Length Property: MaxLength

@{Html.EJ().RTE("rteSample").MaxLength(1000).Render();}		 Property: MaxLength

@Html.EJS().RichTextEditor("defaultRTE").MaxLength(1000).Render()

IFrame

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

@Html.EJS().RichTextEditor("iframe").Value((string)ViewBag.value).IframeSettings(iframeSettings => iframeSettings.Enable(true)).Render()
Attributes Property: IFrameAttributes

@{Html.EJ().RTE("rteSample").Width("800px").IFrameAttributes(new Dictionary<string, object> { { "style", "background-color:#e0ffff color:#6495ed;" } }).Render();}		 Property: Attributes

@Html.EJS().RichTextEditor("iframe").Value((string)ViewBag.value).Height("500").IframeSettings(iframeSettings => iframeSettings.Enable(true)).Render()

<script>var iframeRTE; function created() {

iframeRTE = this;

this.setProperties({

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

</script>
Resource Property: external-CSS

@{Html.EJ().RTE("rteSample").ExternalCSS("/Content/Css/iframe-custom.css").Render();}		 Property: Attributes

@Html.EJS().RichTextEditor("iframe").Value((string)ViewBag.value).Height("500").IframeSettings(iframeSettings => iframeSettings.Enable(true)).Render()

<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

@Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).EditorMode(EditorMode.Html).Render()

Undo

Behavior API in Essential JS 1 API in Essential JS 2
Undo Stack Limit Property: UndoStackLimit

@{Html.EJ().RTE("rteSample").UndoStackLimit(50).Render();}		 Property: UndoRedoSteps

@Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).UndoRedoSteps(30).Render()
Undo Redo Timer Not Applicable Property: UndoRedoTimer

@Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).UndoRedoTimer(300).Render()

Common

Behavior API in Essential JS 1 API in Essential JS 2
Allow Editing Property: AllowEditing

@{Html.EJ().RTE("rteSample").AllowEditing(true).Render();}		 Property: Readonly

@Html.EJS().RichTextEditor("default").Readonly(true).Render()
Auto Focus Property: AutoFocus

@{Html.EJ().RTE("rteSample").AutoFocus(true).Render();}		 Not Applicable
Auto Height Property: AutoHeight

@{Html.EJ().RTE("rteSample").AutoHeight(true).Render();}		 Not Applicable
Paste Clean Up Property: paste-cleanup-settings

@{Html.EJ().RTE("rteSample").PasteCleanupSettings(c=>c.CleanCSS(true).CleanElements(true).ListConversion(true).RemoveStyles(true)).Render();}		 Not Applicable
Css Class Property: CssClass

@{Html.EJ().RTE("rteSample").CssClass("customstyles").Render();}		 Property: CssClass

@Html.EJS().RichTextEditor("default").CssClass("customStyle").Render()
Enabled Property: Enabled

@{Html.EJ().RTE("rteSample").Enabled(true).Render();}		 Property: Enabled

@Html.EJS().RichTextEditor("default").Enabled(true).Render()
Html Encode Property: EnableHtmlEncode

@{Html.EJ().RTE("rteSample").EnableHtmlEncode(true).Render();}		 Property: EnableHtmlEncode

@Html.EJS().RichTextEditor("default").EnableHtmlEncode(true).Render()
Persistence Property: EnablePersistence

@{Html.EJ().RTE("rteSample").EnablePersistence(true).Render();}		 Property: EnablePersistence

@Html.EJS().RichTextEditor("default").EnablePersistence(true).Render()
Resize Property: EnableResize

@{Html.EJ().RTE("rteSample").EnableResize(true).Render();}		 Not Applicable
XHTML Property: EnableXHTML

@{Html.EJ().RTE("rteSample").EnableXHTML(true).Render();}		 Not Applicable
Height Property: Height

@{Html.EJ().RTE("rteSample").Height("350px").Render();}		 Property: Height

@Html.EJS().RichTextEditor("default").Height("300px").Render()
Width Property: Width

@{Html.EJ().RTE("rteSample").Width("500px").Render();}		 Property: Width

@Html.EJS().RichTextEditor("default").Width("500px").Render()
Html Attributes Property: HtmlAttributes

@{Html.EJ().RTE("rteSample").Width("800px").HtmlAttributes(htmlattr).Render();}		 Property: HtmlAttributes

@Html.EJS().RichTextEditor("default").HtmlAttributes((object)ViewBag.attr)).Render()
Is Responsive Property: IsResponsive

@{Html.EJ().RTE("rteSample").IsResponsive(true).Render();}		 No separate Property for responsive, provided default.
Maximum Height Property: MaxHeight

@{Html.EJ().RTE("rteSample").MaxHeight("500px").Render();}		 Not Applicable
Maximum Width Property: MaxWidth

@{Html.EJ().RTE("rteSample").MaxWidth("500px").Render();}		 Not Applicable
Minimum Height Property: MinHeight

@{Html.EJ().RTE("rteSample").MinHeight("300px").Render();}		 Not Applicable
Minimum Width Property: MinWidth

@{Html.EJ().RTE("rteSample").MinWidth("300px").Render();}		 Not Applicable
name Property: name

@{Html.EJ().RTE("rteSample").name("commentBlog").Render();}		 Not Applicable
Clear All Property: ShowClearAll

@{Html.EJ().RTE("rteSample").ShowClearAll(true).Render();}		 Not Applicable
Clear Format Property: ShowClearFormat

@{Html.EJ().RTE("rteSample").ShowClearFormat(true).Render();}		 No separate Property for clear Format. Its Provided in toolbar command.

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

@Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.item)).Render()
Place holder Not Applicable Property: Placeholder

@Html.EJS().RichTextEditor("default").Placeholder("Enter the text").Render()
Context Menu Property: ShowContextMenu

@{Html.EJ().RTE("rteSample").ShowContextMenu(true).Render();}		 Not Applicable
Dimensions Property: ShowDimensions

@{Html.EJ().RTE("rteSample").ShowDimensions(true).Render();}		 Not Applicable
Show Footer Property: ShowFooter

<@{Html.EJ().RTE("rteSample").ShowFooter(true).Render();}		 Not Applicable
Html Source Property: ShowHtmlSource

@{Html.EJ().RTE("rteSample").ShowHtmlSource(true).Render();}		 Method: showSourceCode()

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

rteObj.showSourceCode();
Html Tag Info Property: ShowHtmlTagInfo

@{Html.EJ().RTE("rteSample").ShowHtmlTagInfo(true).Render();}		 Not Applicable
Rounded Corner Property: ShowRoundedCorner

@{Html.EJ().RTE("rteSample").ShowRoundedCorner(true).Render();}		 Not Applicable
Tooltip Property: TooltipSettings

@{Html.EJ().RTE("rteSample").TooltipSettings(tooltip=>tooltip.ShowShadow(false)).Render();}		 Not Applicable
value Property: Value

@{Html.EJ().RTE("rteSample").Value("The Rich Text Editor (RTE) control is an easy to render in client side.").Render();}		 Property: Value

@Html.EJS().RichTextEditor("types").Value((string)ViewBag.value).Height("720px").ToolbarSettings(e => { e.Enable(true); }).Render()
Validation Rules Property: ValidationRules

@{Html.EJ().RTE("rteSample").ValidationRules(new Dictionary<string, object> { { "required", "true" }, { "minWordCount", 15 } }).Render();}		 Achieved in sample level.

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

@{Html.EJ().RTE("rteSample").ValidationMessage(new Dictionary<string, object> { { "minWordCount", "A minimum of {10} words is required here" }, { "Required", "Please enter the content" } }).Render();}		 Achieved in sample level.

https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/validation.html#validation-message
Zoom Step Property: ZoomStep

@{Html.EJ().RTE("rteSample").ZoomStep("0.5").Render();}		 Not Applicable
Disable Method: disable()

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

rteObj.disable()		 Property: Enabled

@Html.EJS().RichTextEditor("default").Enabled(false).Render()
Enable Method: enable()

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

rteObj.enable()		 Property: Enabled

@Html.EJS().RichTextEditor("default").Enabled(true).Render()
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("richtexteditor 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

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.Change("onChange")).Render();}		 Event: Change

@Html.EJS().RichTextEditor("defaultRTE").Change("onChange").Render()
create Event: Create

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.Create("onCreate")).Render();}		 Event: Created

@Html.EJS().RichTextEditor("defaultRTE").Created("onCreated").Render()
Context Menu Click Event: ContextMenuClick

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.ContextMenuClick("onContextMenuClick")).Render();}		 Not Applicable
destroy Event: Destroy

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.Destroy("onDestroy")).Render();}		 Event: Destroyed

@Html.EJS().RichTextEditor("defaultRTE").Destroyed("onDestroyed").Render()
Pre Render Event: PreRender

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.PreRender("onPreRender")).Render();}		 Not Applicable
Select Event: Select

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.Select("onSelect")).Render();}		 Not Applicable
Focus Not Applicable Event: Focus

@Html.EJS().RichTextEditor("defaultRTE").Focus("onFocus").Render()

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

@{Html.EJ().RTE("rteSample").ClientSideEvents(evt => evt.Execute("onExecute")).Render();}		 Event: ActionComplete

@Html.EJS().RichTextEditor("defaultRTE").ActionComplete("onActionComplete").Render()
Before Execute Not Applicable Event: ActionBegin

@Html.EJS().RichTextEditor("defaultRTE").ActionBegin("onActionBegin").Render()
Previous
Next