Blazor Editor Edit Modes Overview
The Editor provides two different configuration modes you can set that affect the way the content is styled.
You control which mode is used through the EditMode
parameter of the editor which takes a member of the Telerik.Blazor.EditorEditMode
enum:
-
Iframe
- (the default) - the content area is an editable<iframe>
element. -
Div
- the content area is an editable<div>
element.
The key difference is that the Iframe
mode creates a separate HTML document for editing, and this means that it does not inherit the CSS rules from the current page, and the editor can add some rules of its own to provide styling (for example, for <table>
elements).
@* the two different edit modes *@
<TelerikEditor @bind-Value="@Val1" EditMode="@EditorEditMode.Iframe"></TelerikEditor>
<TelerikEditor @bind-Value="@Val2" EditMode="@EditorEditMode.Div"></TelerikEditor>
@code {
public string Val1 { get; set; } = "<p>I am in an iframe</p>";
public string Val2 { get; set; } = "<p>I am in a div</p>";
}