Setting initial font size not working

[Lorella Caglio]

Hi,

toolbar don't show the initial font size setting by style:

.e-richtexteditor .e-rte-content .e-content,

.e-richtexteditor .e-source-content .e-content {

    font-size: 16pt;

    font-family: Verdana;

}

when page is loaded, the rich text editor completly ignore initial settings:

when start typing, the inserted text have the right font and size, but toolbar always show 10pt:

What is the correct way to setup the editor?

Also, I need to add a new font family to the default font list. What is the standard font list? 

I think that sample code found in " Add Google fonts in Blazor RichTextEditor component" is not correct: it don't really show how to add a new font, and the result is not like as shown (less fonts than standard, Arial duplicated and Segoe UI missing).

Thanks

[Revanth Krishnan]

Hi Lorella, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your queries, 

 

Query 1:  “Toolbar don't show the initial font size setting by styles when the page is loaded, the rich text editor completely ignores initial settings. When start typing, the inserted text has the right font and size, but the toolbar always shows 10pt. What is the correct way to set up the editor?” 

 

Query 2: “Also, I need to add a new font family to the default font list. What is the standard font list?  I think that sample code found in "Add Google fonts in Blazor Rich Text Editor component" is not correct, it doesn't really show how to add a new font, and the result is not like as shown (fewer fonts than standard, Arial duplicated and Segoe UI missing).” 

 

The property ‘Default’ in the ‘RichTextEditorFontSize’ and ‘RichTextEditorFontFamily’ should be configured to set the initial size and font to display, along with CSS styles. Also, ‘Items’ property need to be configured to add a new font family or font size. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<SfRichTextEditor Placeholder="Enter Some Content"> 

    <RichTextEditorToolbarSettings Items="@Tools" /> 

    <RichTextEditorFontFamily Items="@FontFamilyItems" Default="Verdana" /> 

    <RichTextEditorFontSize Items="@FontSizeItems" Default="16pt"></RichTextEditorFontSize> 

</SfRichTextEditor> 

 

<style> 

    .e-richtexteditor .e-rte-content .e-content, 

    .e-richtexteditor .e-source-content .e-content { 

        font-size: 16pt; 

        font-family: Verdana; 

    } 

</style> 

 

@code { 

    private List<DropDownItemModel> FontSizeItems = new List<DropDownItemModel>() 

    { 

        //Newly added font size. 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "16 pt", Value = "16pt" }, 

        //Default Font Size in Rich Text Editor. 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "8 pt", Value = "8pt" }, 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "10 pt", Value = "10pt" }, 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "12 pt", Value = "12pt" }, 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "14 pt", Value = "14pt" }, 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "18 pt", Value = "18pt" }, 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "24 pt", Value = "24pt" }, 

        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "36 pt", Value = "36pt" } 

    }; 

 

    private List<DropDownItemModel> FontFamilyItems = new List<DropDownItemModel>() 

    { 

        //Newly added font family. 

        new DropDownItemModel() { CssClass = "e-roboto-ui", Command = "Font", SubCommand = "FontName", Text = "Roboto", Value = "Roboto" }, 

        //Default Font family in Rich Text Editor. 

        new DropDownItemModel() { CssClass = "e-segoe-ui", Command = "Font", SubCommand = "FontName", Text = "Segoe UI", Value = "Segoe UI" }, 

        new DropDownItemModel() { CssClass = "e-arial", Command = "Font", SubCommand = "FontName", Text = "Arial", Value = "Arial,Helvetica,sans-serif" }, 

        new DropDownItemModel() { CssClass = "e-georgia", Command = "Font", SubCommand = "FontName", Text = "Georgia", Value = "Georgia,serif" }, 

        new DropDownItemModel() { CssClass = "e-impact", Command = "Font", SubCommand = "FontName", Text = "Impact", Value = "Impact,Charcoal,sans-serif" }, 

        new DropDownItemModel() { CssClass = "e-tahoma", Command = "Font", SubCommand = "FontName", Text = "Tahoma", Value = "Tahoma,Geneva,sans-serif" }, 

        new DropDownItemModel() { CssClass = "e-times-new-roman", Command = "Font", SubCommand = "FontName", Text = "Times New Roman", Value = "Times New Roman,Times,serif" }, 

        new DropDownItemModel() { CssClass = "e-verdana", Command = "Font", SubCommand = "FontName", Text = "Verdana", Value = "Verdana,Geneva,sans-serif" } 

    }; 

 

    . . . 

} 

 

_Host.cshtml 

 

<head> 

    . . . 

    <link rel="stylesheet" rel='nofollow' href=http://fonts.googleapis.com/css?family=Roboto> 

</head> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RichTextEditor_Test-1312694756 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

 

[Lorella Caglio]

Thanks for support.

Now it works.

[Revanth Krishnan]

Hi Lorella, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement. Please let us know if you need any further assistance. 

 

Regards, 

Revanth 

[Alisio Putman]

Hi,

I'm experiencing also a initial value problem.

The inital p tag doesn't contain the default font size and font family.

can be seen in my demo app.

https://github.com/alisio92/TextEditorDemo

video showcase in attachment.

thanks

Attachment: demo_61603df3.zip

[CharlesG]

Hi, please note this doesn't quite match what is stated in the documentation:

https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/default-font

The sample listed above works.  What's stated in the documentation does not.

Thanks.

[Vinitha Jeyakumar]

Hi Charles,

We have checked the sample provided in the mentioned documentation to change the default font family. But we didn't face any issues. we have also prepared a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server1169589029

Can you please share the details below,

• Exact issue which you are facing.
• Issue replication steps.
• If possible please share us with the issue reproducing runnable sample and entire code snippet.

Regards,

Vinitha

[Gregory Braekevelt]

Dear Vinitha Jeyakumar

Continuing on the question from Alisio Putman, I have edited your sample to reconstruct the issue.

Following the documentation as stated on https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/default-font, to set the default font, you have to configure the RTE and add a style tag to the page to set the context class

    <RichTextEditorFontFamily Default="Impact" Items="@FontFamilyItems" />

    <RichTextEditorFontSize Default="36 pt" />

<style>

    .customClass .e-rte-content .e-content {

        /* to get the desired font on intially*/

        font-family: Impact,Charcoal,sans-serif;

        font-size: 36pt;

    }

</style>

When typing new text in an empty RTE with a default font, the typed text will correctly be shown in the default font. However, when retrieving the value of the RTE, with two-way binding for example, you will get html and text without the default font styling.

Using this value on a different page, a dynamic html component, in an email, in a RTE with a different class... will result in plain text without the set default font as styling.

I assume this:

• Setting the RTE default font settings  RichTextEditorFontFamily and RichTextEditorFontSize only selects the items in their respective dropdownlists in the toolbar
  
• Setting the default font family and size in the .e-content class in a style tag on the page, only applies its styling on the RTE with this class on this page.
• Without clicking on the font family and size button/dropdown at the start, the value of the RTE with any typed text will not have the default font.

This is an issue when you save the value to the database and reload it in a RTE with a different default font. The result will be a styling with that RTE's default font, instead of the default font you saved the text in originally, as the styling is not passed with the value of the RTE

Attachment: RTE_Server1169589029_edit_b275d99a.zip

[Vinitha Jeyakumar]

Hi Gregory,

Currently, we are validating your reported query. we will update you the further details on or before 26^th September 2022.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi Gregory,

one of your assumptions was correct that setting the default font family and size in the .e-content class in a style tag on the page, only applies its styling on the RTE with this class on this page. But your requirement to get the HTML content with applied default styles can be achieved by using the below codes,

Code snippet:

<SfRichTextEditor CssClass="customClass" @bind-Value="@_myTextFromRTE">

    <RichTextEditorToolbarSettings Items="@Tools" />

    <RichTextEditorFontFamily Default="Impact" Items="@FontFamilyItems" />

    <RichTextEditorFontSize Default="36 pt" />

   

</SfRichTextEditor>

<p>

    <button type="button" @onclick="@RenderComponent">

        Render above text as actual html

    </button>

</p>

<SfRichTextEditor CssClass="classWithoutDefaults" @bind-Value="@dynamicContent" Readonly="true">

    <RichTextEditorToolbarSettings Items="@Tools" />

    <RichTextEditorFontFamily Default="Impact" Items="@FontFamilyItems" />

    <RichTextEditorFontSize Default="36 pt" />

</SfRichTextEditor>

<style>   

    .customClass .e-rte-content .e-content {

        /* to get the desired font on intially*/

        font-family: Impact,Charcoal,sans-serif;

        font-size: 36pt;

    }

    .classWithoutDefaults .e-rte-content .e-content {

            /* to get the desired font on intially*/

            font-family: initial;

            font-size: initial;

        }

   

</style>

@code{   

    public string RTEContent { get; set; }

    private string dynamicContent = "";

    private string _myTextFromRTE = "";

    private async Task RenderComponent()

    {

        RTEContent = "<div style='font-family: Impact; font-size:36pt;'>" + _myTextFromRTE + "</div>";       

        dynamicContent = RTEContent;

    }

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server11-1730767291

Regards,

Vinitha