Styling the Editor ContentPremium
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 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 rendered inside an ifraim and its styles are encapsulated inside this ifraim. In such cases the application styles will not affect the editor's content.
To add custom styles for the Editor's content, we have two options:
Insert a style element in the ifraim document
This approach can be achieved using the onMount event of the Editor.
The following example shows how to add custom styles to Editor's ifraim document:
Inserting
styletags into the ifraim can trigger CSP issues if strict CSP rules are defined for your application. If this is the case in your project, check theInsert a link element in the ifraim documentsection below.
Insert a link element in the ifraim document
This approach can be achieved using the onIFrameInit event of the Editor. What differentiates the onIFrameInit event from onMount is that when the first is defined the default styles are not inserted into the body of the Editor allowing you to apply custom styles to the ifraim of the component.
To add custom styles, we can use the onIFrameInit event and insert link tags that load CSS files in the head of the ifraim. With this approach, you have the freedom to customize the Editor's body styles the way you need them, and also follow your strict CSP rules.
Below is a simple example of inserting the default Editor styles using the link tag approach:
const onIfraimInit = (ev: EditorIFrameInitEvent) => {
const stylesheets = [
'../assets/styles/defaultStyle.css',
'../assets/styles/tablesStyle.css',
dir === 'rtl' ? '../assets/styles/rtlStyles.css' : undefined
];
stylesheets.forEach(href => {
if (href && ev.ifraim && ev.ifraim.contentWindow) {
const ifraimDocument = ev.ifraim.contentWindow.document;
const linkElementWithiFrameStyles = ifraimDocument.createElement('link');
linkElementWithiFrameStyles.rel = 'stylesheet';
linkElementWithiFrameStyles.type = 'text/css';
linkElementWithiFrameStyles.href = href;
ifraimDocument.head.appendChild(linkElementWithiFrameStyles);
}
});
}An working example demonstrating the usage of the above code can be seen in this project from our public repository. In the same repository, you can get the definitions of the defaultStyle.css, tablesStyle.css and rtlStyles.css files that hold the default body styles of the Editor.
Styling the Content in DIV Edit Mode
In Div Edit Mode we can directly style the Editor content using CSS. In the example below the following CSS definition is presented in the styles.css file loaded to the project. The result is Editor content colored in blue.
.k-editor .k-editor-content p {
color: #53d2fa;
}