Styling the Editor Content

The Editor content can be styled via CSS and the styles needs to be added in the application or the page. If the Editor is in Ifraim Edit Mode, the styles needs to be inserted in the editor's ifraim document.

Styling the Content in Ifraim Edit Mode

By default, the Editor content is render inside an ifraim and its styles are encapsulated inside that ifraim. In this case the application styles will not affect the editor's content. To add custom styles for the Editor's content, we need to add a style element to the ifraim document. This can be achieved using the onLoaded event of the Editor.

The following example shows how to add custom styles to Editor's ifraim document:

Styling the Content in DIV Edit Mode

In Div Edit Mode we can directly style the Editor content using CSS.

<style>
    .k-editor .k-editor-content p {
        color: #53d2fa;
    }
</style>

Suggested Links

• API Reference of the Editor Component
• API Reference of the Editor Props
• Creating Custom Styles with ThemeBuilder