Appearance

The 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.

Copy Code<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.

Copy Code<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 following example demonstrates both style modes in action.

Customizing the Appearance

To customize the appearance of the Editor content, 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 Editor allows you to customize the appearance of its content 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.

Copy Code.k-editor .k-editor-content { /* target the content area */
    height: 300px;
}

Resizable Editor

By default, the Editor is not resizable. To enable the built-in browser resizing behavior within the Editor, set the resizable option to true. To restrict the Editor width and height, bind resizable to an EditorResizableOptions object with the desired minWidth, minHeight, maxWidth and maxHeight values.

The resizing functionality is not available in Internet Explorer.

The following example demonstrates the Editor resizing functionality in action.

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.

Suggested Links

• API Index of the Editor
• API Reference of the EditorComponent