Setting the default rendered font in the KendoReact Editor

8 posts, 1 answers
  1. John
    John avatar
    25 posts
    Member since:
    Jan 2019

    Posted 22 Apr 2019 Link to this post

    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/

     

  2.
  3. John
    John avatar
    25 posts
    Member since:
    Jan 2019

    Posted 22 Apr 2019 in reply to John Link to this post

    just setting the className on the Editor component doesn't have any effect.
  5. John
    John avatar
    25 posts
    Member since:
    Jan 2019

    Posted 22 Apr 2019 in reply to John Link to this post

    I also tried setting the font style via the contentStyle and style props, whch don't have any effect either.
  7. John
    John avatar
    25 posts
    Member since:
    Jan 2019

    Posted 22 Apr 2019 Link to this post

    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?
  8.
  9. Answer
    Stefan
    Admin
    Stefan avatar
    3001 posts

    Posted 23 Apr 2019 Link to this post

    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
  11. John
    John avatar
    25 posts
    Member since:
    Jan 2019

    Posted 23 Apr 2019 Link to this post

    that works great. Thanks Stefan!
  13. Richard
    Richard avatar
    3 posts
    Member since:
    Jan 2020

    Posted 04 Jan Link to this post

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

  14.
  15. Stefan
    Admin
    Stefan avatar
    3001 posts

    Posted 04 Jan Link to this post

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

Back to Top