How can i set the default rendered font in the KendoReact Editor? When the Editor renders, the content is set to the browser default font (times new roman for me). I don't want to enable users to CHANGE the font, I just want to set what the text looks like in the browser to fit the theme of the rest of my form. To further clarify, I don't want to have the editor serialize the font setting when submitting the form, and I don't want to add the font selector in the toolbar. I just want the appearance of a different font in the editable area than browser default.
I see 2 examples in the Editor documentation. The overview example appears to use browser default, and the Custom Rendering Example has the font set to a different font, but it is unclear how that is happening.
Overview Example:
https://www.telerik.com/kendo-react-ui/components/editor/
Custom Rendering Example:
https://www.telerik.com/kendo-react-ui/components/editor/custom-rendering/
8 Answers, 1 is accepted
Rank 1
Rank 1
Rank 1
Thank you for the details.
The desired result can be achieved by adding the font-family rule directly to the DIV that is rendered inside the iFrame. This can be done on the ComponentDidMount:
https://stackblitz.com/edit/react-wfgk3e-ro16uh?file=app%2Fmain.jsx
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Iron
I also need to change font-family. I tried you solution, https://stackblitz.com/edit/react-wfgk3e-ro16uh?file=app%2Fmain.jsx
It is working in Chrome & Edge, but in Firefox i get error:
TypeError: iFrame.contentDocument.querySelector(...) is null
My code:
let editor = document.getElementsByClassName('k-editor')[0];
let iFrame = editor.querySelector('iframe');
iFrame.contentDocument.querySelector('.k-content').setAttribute("style", "font-family: Calibri;");
Do you know why this happens?
Thank you, Matjaz Reberc
Rank 1
Rank 1
@stefan how about setting the default selected font from the FontName Editor Tools? I have been struggling to figure out how to implement the "defaultvalue" of FontNameProps (https://www.telerik.com/kendo-react-ui/components/editor/api/EditorTools/FontNameProps/). I also created a custom EditorTools.createStyleDropDownList and set the defaultItem, but that doesn't actually change the text in the editor even though my desired text is selected. Also, as an aside, setting that defaultItem makes it so that you can never actually use that item. I'm very confused by its intended functionality.
I want the editor to render with the FontName tool, but to automatically be set to Tahoma so that the users don't have to pick it every time they open the editor. However, they should still have the ability to change their font if they see fit. I'd like the same functionality for the FontSize where I want it to be defaulted to 12pt.
Any help would be greatly appreciated.
Hello, Richard,
The default font size and family are coming directly from the HTML/CSS of the content. They are not coming from the Editor Tools, the tools values are applied after the user specifically selects them.
In this case, we can recommend directly applying the styles to the content:
https://www.telerik.com/kendo-react-ui/components/editor/styling-content/
Please let me know if you need additional information on this matter.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello, Matjaz,
Stying the content in the Editor can be done as shown in this article, the previous answer is outdated:
https://www.telerik.com/kendo-react-ui/components/editor/styling-content/#toc-styling-the-content-in-iframe-edit-mode
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.