Components / Editor

Appearance

The Editor supports an encapsulated and non-encapsulated style mode and also provides options for defining custom CSS styles to change the appearance of its content.

Default Configuration

By default, the Editor is initialized in encapsulated (iframe) mode in which the CSS rules of the application will not affect the content of the component.

To disable the style encapsulation behavior of the Editor, set its iframe input property to false. As a result, the application CSS rules will be applied to the Editor content.

The following example demonstrates both style modes in action.

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

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    template: `
        <p>With Style Encapsulation:<p>
        <kendo-editor [value]="value"></kendo-editor>
        <p>Without Style Encapsulation:<p>
        <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
    `,
    styles: [`
        p {
            font-weight: bold;
        }

        kendo-editor {
            height: 150px
        }
    `]
})
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

By default, the Editor is initialized in an iframe and receives the .k-editor-iframe class. To form a CSS selector for configuring the specific appearance of the content, use .k-editor-iframe .k-content followed by the corresponding tags.

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

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    template: `
        <kendo-editor [value]="value" style="height: 300px;">
        </kendo-editor>
    `,
    styles: [`
        .k-editor-iframe .k-content p {
            color: blue; /* set the color */
            background-color: initial; /* reset the background-color */
        }

        .k-editor-iframe .k-content img {
            border: 1px solid blue; /* set the border */
        }
    `]
})
export class AppComponent {
    public value = `
        <p>An Editor with custom styles.</p>
    `;
}

Setting the Height

By default, the Editor will have a height of 150px. If iframe is set to false and if the height is not defined, the Editor will expand to fit its content.

To change the default height of the Editor, use CSS rules. If you use the component styles, you have to set the encapsulation to ViewEncapsulation.None.

  • Using CSS styles inline.

    <kendo-editor [value]="value" style="height: 300px;">
</kendo-editor>

  • Using CSS to change only the height of the content.

    .k-editor .k-content {
   height: 300px;
}

In this article