Appearance
The Editor supports an encapsulated and non-encapsulated style modes. By default, the Editor is initialized in encapsulated (iframe) mode. The renreded HTML in this case is as follows:
<kendo-editor>
<kendo-toolbar></kendo-toolbar>
<div class="k-editor-content">
<iframe class="k-iframe">
...
<div contenteditable="true" class="ProseMirror">...</div>
...
</iframe>
</div>
</kendo-editor>
To disable the style encapsulation behavior of the Editor, set its iframe
input property to false
. This will result in the following HTML:
<kendo-editor>
<kendo-toolbar></kendo-toolbar>
<div class="k-editor-content">
<div contenteditable="true" class="ProseMirror">...</div>
</div>
</kendo-editor>
Style encapsulation
In encapsulated rendering mode ([iframe]="true"
) the CSS rules of the application will not affect the content of the Editor component. In non-encapsulated mode ([iframe]="false"
) the application CSS rules will be applied to the Editor content.
NOTE: By default the Editor styles are encapsulated (
[iframe]="true"
).
The following example demonstrates both style modes in action.
Customizing the Appearance
To customize the appearance of the Editor content, set host component's encapsulation to ViewEncapsulation.None
and form a CSS selector by using .k-editor .k-editor-content
followed by the corresponding tags.
NOTE: The appearance of the Editor content can be customized only if
[iframe]="false"
.
The following example demonstrates how to style the Editor content.
Setting the Height
By default the Editor content will have a height of 150px and the [iframe]
property will be set to true
. If iframe
is set to false
the Editor will expand to fit its content.
To change the default height of the Editor component or its content area, use CSS rules. If you are using component styles, you have to set the encapsulation to ViewEncapsulation.None
.
.k-editor .k-editor-content { /* target the content area */
height: 300px;
}