This is a migrated thread and some comments may be shown as answers.

Setting the default rendered font in the KendoReact Editor

8 Answers 1547 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

John asked on 22 Apr 2019, 06:09 PM

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

Accepted

n/a

commented on 29 Apr 2021, 01:04 PM

Hello Stefan,

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

answered on 04 Jan 2021, 12:41 PM

@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.

answered on 04 Jan 2021, 02:27 PM

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/.