Appearance
The Angular Editor provides options for setting its style mode and enables you to define the height of its content as well as customize its appearance altogether.
Style Modes
The Editor supports an encapsulated and non-encapsulated style modes. By default, the Editor is initialized in encapsulated, iframe mode.
The following example demonstrates the rendered HTML when the Editor is in its iframe mode.
<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.
The following example demonstrates the rendered HTML when the Editor is in its non-encapsulated, iframe-disabled mode.
<kendo-editor>
<kendo-toolbar></kendo-toolbar>
<div class="k-editor-content">
<div contenteditable="true" class="ProseMirror">...</div>
</div>
</kendo-editor>Style Encapsulation
In the encapsulated rendering mode ([iframe]="true") the CSS rules of the application will not affect the content of the Editor. In non-encapsulated mode ([iframe]="false") the application CSS rules will be applied to the Editor content.
- By default, the Editor styles are encapsulated (
[iframe]="true").- The SVG mode doesn't support strict Content-Security-Policy (CSP) mode due to the usage of a style element.
The following example demonstrates both style modes in action.
Customizing the Appearance
There are two approaches to customize the appearance of the Editor content, depending on the rendering mode.
Encapsulated Mode
You can style the content in the encapsulated rendering mode ([iframe]="true") by setting the iframeCss property of the Editor. It accepts an EditorCssSettings object and enables you to specify the following options:
content—Allows you to specify a string of styling rules which will be applied asembedded stylesusing a<style>element in the page<head>section.path—Allows you to link an external style sheet by specifying a string of its location. The styles will be applied by using a<link>element in the page<head>section.keepBuiltInCss—A boolean value defining whether the built-in styles should be applied. The default value istrue.
The following example demonstrates how to style the Editor content in encapsulated mode.
Non-encapsulated Mode
To customize the appearance of the Editor content in the non-encapsulated rendering mode ([iframe]="false"), set the encapsulation of the host component to ViewEncapsulation.None and form a CSS selector by using .k-editor .k-editor-content followed by the corresponding tags.
The following example demonstrates how to style the Editor content in non-encapsulated mode.
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. Alternatively, you can use the iframeCss property.
.k-editor .k-editor-content { /* target the content area */
height: 300px;
}Caret Color
By default, the caret color within the Editor assumes the same color as the text it is in. When the font color is changed through the built-in tool, the caret color is changed as well to indicate what font color will be applied when the end user starts typing.
The following example demonstrates the described functionality.