Styling the Editor Content

The React Editor, part of KendoReact, content can be styled via CSS and the styles needs to be added in the application or the page. If the Editor is in Iframe Edit Mode, the styles needs to be inserted in the editor's iframe document.

Styling the Content in Iframe Edit Mode

By default, the Editor content is render inside an iframe and its styles are encapsulated inside that iframe. 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 iframe document. This can be achieved using the onMount event of the Editor.

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

Example
View Source
Change Theme:

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>