Components / Editor

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.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    template: `
        <div class="example-wrapper">
            <div class="example-editor">
                <h6 class="example-config">With style encapsulation</h6>
                <kendo-editor [value]="value"></kendo-editor>
            </div>

            <div class="example-editor">
                <h6 class="example-config">Without style encapsulation</h6>
                <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
            </div>
        </div>
    `,
    styles: [
        `
        .example-wrapper {
            display: flex;
            justify-content: space-between;
        }

        .example-wrapper h6 {
            font-size: 14px;
            padding: 8px;
            margin-bottom: 8px;
        }

        .example-editor {
            flex: 1;
        }

        .example-editor:last-child {
            margin-left: 8px;
        }

        p {
            color: blue;
        }

        p strong {
            font-size: 120%;
            background-color: yellow;
        }

        li p {
            background-color: blue;
            color: white;
        }

        kendo-editor {
            height: 350px;
        }
        `
    ]
})
export class AppComponent {
    public value = `
        <p>
            The Kendo UI Angular Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
            In this version, the Editor provides the core HTML editing engine which includes basic text formatting, hyperlinks, and lists.
            The widget <strong>outputs identical HTML</strong> across all major browsers, follows
            accessibility standards, and provides API for content manipulation.
        </p>
        <p>Features include:</p>
        <ul>
            <li>Text formatting</li>
            <li>Bulleted and numbered lists</li>
            <li>Hyperlinks</li>
            <li>Cross-browser support</li>
            <li>Identical HTML output across browsers</li>
        </ul>
    `;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { EditorModule } from '@progress/kendo-angular-editor';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        EditorModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

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

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

In this article