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

Setting the default rendered font in the KendoReact Editor

8 Answers 684 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
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

Sort by
0
John
Top achievements
Rank 1
answered on 22 Apr 2019, 06:15 PM
just setting the className on the Editor component doesn't have any effect.
0
John
Top achievements
Rank 1
answered on 22 Apr 2019, 06:30 PM
I also tried setting the font style via the contentStyle and style props, whch don't have any effect either.
0
John
Top achievements
Rank 1
answered on 22 Apr 2019, 06:49 PM
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?
0
Accepted
Stefan
Telerik team
answered on 23 Apr 2019, 05:27 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
n/a
Top achievements
Rank 1
Iron
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
0
John
Top achievements
Rank 1
answered on 23 Apr 2019, 02:58 PM
that works great. Thanks Stefan!
0
Richard
Top achievements
Rank 1
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.

0
Stefan
Telerik team
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/.

0
Stefan
Telerik team
answered on 29 Apr 2021, 01:46 PM

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.

Tags
General Discussions
Asked by
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Stefan
Telerik team
Richard
Top achievements
Rank 1
Share this question
or