Toolbar current font not correct

[Lorella Caglio]

 I customized the font bar by inserting google fonts. when I select a font from the dropdown, the text is changed correctly, but the font shown in the toolbar is always the one set as default

 public static List<DropDownItemModel> FontFamilyItems()

        {

            return new List<DropDownItemModel>()

            {

                     new DropDownItemModel() {CssClass="f-maven-pro", Text = "Maven Pro", Value = "'Maven Pro', sans-serif" },

                      new DropDownItemModel() {CssClass="f-roboto", Text = "Roboto", Value = "'Roboto', sans-serif" },

                      new DropDownItemModel() {CssClass="f-releway", Text = "Raleway", Value = "'Raleway', sans-serif" },

                      new DropDownItemModel() {CssClass="f-open-sans", Text = "Open Sans", Value = "'Open Sans', sans-serif" },

                      new DropDownItemModel() {CssClass="f-koho", Text = "KoHo", Value = "'KoHo', sans-serif" },

                      new DropDownItemModel() {CssClass="f-montserrat", Text = "Montserrat", Value = "'Montserrat', sans-serif" },

                      new DropDownItemModel() {CssClass="f-montserrat-alt", Text = "Montserrat Alt", Value = "'Montserrat Alternates', sans-serif" },

                      new DropDownItemModel() {CssClass="f-roboto-mono", Text = "Roboto Mono", Value = "'Roboto Mono', monospace" },

                      new DropDownItemModel() {CssClass="f-nova-mono", Text = "Nova Mono", Value = "'Nova Mono', monospace" },

                     new DropDownItemModel() {IconCss="f-permanent-marker", CssClass="f-permanent-marker", Text = "Permanent Marker", Value = "'Permanent Marker', cursive" },

                      new DropDownItemModel() {CssClass="f-dancing-script", Text = "Dancing Script", Value = "'Dancing Script', cursive" },

                      new DropDownItemModel() {CssClass="f-kalam", Text = "Kalam", Value = "'Kalam', cursive" },

                      new DropDownItemModel() {CssClass="f-marck-script", Text = "Marck Script", Value = "'Marck Script', cursive" }

            };

        }

Component setup:

       <SfRichTextEditor Placeholder="@PlaceHolderText" EditorMode="EditorMode.HTML" 

               Readonly="@IsReadOnly" Enabled="@Enabled" @bind-Value="@CurrentValue">

            <RichTextEditorToolbarSettings Items="@Tools" />

            <RichTextEditorFontFamily Items="@FontFamilyItems" Default="Maven Pro" Width="100px" />

            <RichTextEditorFontSize Items="@FontSizeItems" Default="12 pt" Width="50px" />

            <RichTextEditorImageSettings Path="@ImageUrl" />

            <RichTextEditorEvents ImageUploadChange="@HandleImageUploadChange" OnImageUploadSuccess="@HandleImageUploadSuccess" OnImageRemoving="@HandleImageRemoving"

                                  OnDialogClose="@HandleDialogClose" />

        </SfRichTextEditor>

[Revanth Krishnan]

Hi Lorella, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “In Rich Text Editor the custom font family status is not updated properly in the toolbar”. 

 

We have analyzed the shared code snippet and we are able to reproduce this issue from our end and the issue occurred because the ‘Value’ property in ‘FontFamilyItems’ has single quotes used inside like ( Value = "'Maven Pro', sans-serif"). This can be resolved by removing the single quote inside the ‘Value’ property. We have prepared a sample based on the shared code snippet for your reference, 

 

Code Snippet: 

 

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

    { 

        new DropDownItemModel() {CssClass="f-maven-pro", Text = "Maven Pro", Value = "Maven Pro, sans-serif" }, 

        new DropDownItemModel() {CssClass="f-roboto", Text = "Roboto", Value = "Roboto, sans-serif" }, 

        . . . 

    }; 

 

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

 

Please check the above code snippet and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth