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:

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. This will result in the following HTML:

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

Copy Codeimport { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
        <kendo-editor [value]="value" [iframe]="false" style="height: 300px;">
        </kendo-editor>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .k-editor .k-editor-content p {
            color: blue; /* set the color */
            background-color: initial; /* reset the background-color */
        }
        .k-editor .k-editor-content li {
            background-color: yellow; /* set the background */
        }
    `]
})
export class AppComponent {
    public value = `
        <p>An Editor with custom styles.</p>
         <ul>
            <li>Text formatting</li>
            <li>Bulleted and numbered lists</li>
        </ul>
    `;
}

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;
}

Suggested Links

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