Modes of Operation
Depending on the element from which the Editor is initiated, it provides two types of operation modes—the classic and the inline mode.
Classic Mode
If you use the default <textarea>
element for initializing the Editor, the Editor assumes its classic mode. The textarea
is not visible and is used to hold the value of the widget. You can type in the contenteditable iframe
that is created.
The classic Editor posts its value automatically because it is based on a form
element. The tools of the Editor are always visible. Its content does not reside on the main web page and the styling of the page does not influence the editable content. To apply custom styles to the editable content, inject them through the configuration of the Editor. For more information, refer to the demo on the classic Editor mode.
@(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 100%;height:440px" })
)
<kendo-editor name="editor" style="width: 100%;height:440px">
</kendo-editor>
Inline Mode
If you use the Tag()
method of the Editor with a "div"
parameter, the Editor assumes its inline mode. The <div>
element is content-editable and is used by the widget to return its value. For a runnable example, refer to the demo on inline editing by the Editor.
@(Html.Kendo().Editor()
.Name("editor")
.Tag("div")
.HtmlAttributes(new { style="width: 100%;height:440px" })
)
<kendo-editor tag="div" name="editor" style = "width: 100%;height:440px">
</kendo-editor>
With the previous configuration, the tools of the Editor are only visible when the widget is focused. Its content resides on the main web page and the styling of the page influences the editable content.
While it is possible to initialize an inline Editor from a non-
div
element, such asp
orh1
, it is strongly recommended that you use the<div>
one. Do not use<table>
elements for creating inline Editors because of Internet Explorer browser limitations.
Editors that are instantiated from a contentEditable
element will not post their value to the server when the value was submitted within a form. For more information, refer to the demo on the inline Editor mode.
Because of the limited
iframe
support by the iOS Safari browser, it is recommended to use the inline Editor mode on iOS devices.