Setting the default rendered font in the KendoReact Editor

[John]

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/

 

[John]

just setting the className on the Editor component doesn't have any effect.

[John]

I also tried setting the font style via the contentStyle and style props, whch don't have any effect either.

[John]

I think I see why the custom render is not falling back to the browser default font. The Custom Editor eliminates the iframe.  Is there any other way of passing styles down to the child iframe document without having to create a full custom editor?

[Stefan]

Hello, John,

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

[n/a]

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

[John]

that works great. Thanks Stefan!

[Richard]

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

[Stefan]

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

[Stefan]

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