Setting Default Text Styles in Kendo React Editor Based on Page Settings
Environment
| Product Version | 10.1.0 |
| Product | Progress® KendoReact Editor |
Description
To apply default page settings for text styles like font color, font family, and font size in the Editor. These settings should be the initial styles when a user starts typing. However, if a user manually changes these styles within the Editor, their customizations should take priority over the default page settings. This knowledge base article also answers the following questions:
- How can I apply page settings as default styles in the Kendo React Editor?
- How to dynamically set text styles inside an iframe for the Kendo React Editor?
Solution
To achieve the desired behavior, follow these steps:
-
Insert a Style Element in the Iframe Document: Begin by setting the default styles of the content. Insert a style element into the iframe document of the Editor. For detailed instructions and examples, refer to the official documentation on styling the content in iframe edit mode.
-
Configure the Default Values of Toolbar Tools: Next, set the
defaultValuefor custom tools in the toolbar, specifically for font-size, font-family, and fore-color. This step ensures that the Editor initiates with your default page settings, but allows user modifications to override these defaults. For implementation details, see this example:
By following these steps, the Kendo React Editor will start with the default text styles based on your page settings. Moreover, any style changes made by the user within the Editor will override these defaults, ensuring a flexible and user-friendly editing experience.