1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Default font size in the Rich Text Editor

Default font size in the Rich Text Editor

Hello
I'm trying to add some font sizes
When the editor loads, I want the font size to be 18 pixels
And the text mode is on Justify by default
please guide me

3 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team March 4, 2021 05:38 AM UTC

Hi James, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “I am trying to add some font sizes and when editor loads I want the font size to be 18px and also text-align should be Justify by default”. 
 
This can be achieved using the “e-richtexteditor-fontsize” where the font sizes can be added and also default size can be set using the “default“ property. And to load the editor with 18px the CSS style “font-size: 18px;” should be set for the class “.e-richtexteditor .e-rte-content .e-content”. 
 
To load the editor with text alignment as “Justify” by default the CSS style “text-align: justify;” should be set for the class “.e-richtexteditor .e-rte-content .e-content”. 
 
We have prepared a sample for your reference, 
 
Code Snippet: 
Index.cshtml 
<ejs-richtexteditor id="defaultRTE"> 
    <e-richtexteditor-fontsize width="60px" items="@ViewBag.fontsizeItems" default="18 px"> 
    </e-richtexteditor-fontsize> 
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings> 
</ejs-richtexteditor> 
 
<style> 
    .e-richtexteditor .e-rte-content .e-content { 
        font-size: 18px; 
        text-align: justify; 
    } 
</style> 
 
public IActionResult Index() 
{ 
    object size1 = new 
    { 
        text = "8 px", 
        value = "8px" 
    }; 
    object size2 = new 
    { 
        text = "10 px", 
        value = "10px" 
    }; 
    object size3 = new 
    { 
        text = "12 px", 
        value = "12px" 
    }; 
    object size4 = new 
    { 
        text = "14 px", 
        value = "14px" 
    }; 
    object size5 = new 
    { 
        text = "18 px", 
        value = "18px" 
    }; 
    object size6 = new 
    { 
        text = "42 px", 
        value = "42px" 
    }; 
 
    ViewBag.fontSizeItems = new[] { size1, size2, size3, size4, size5, size6 }; 
 
    ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough", 
        "FontName", "FontSize", "FontColor", "BackgroundColor", 
        "LowerCase", "UpperCase", "|", 
        "Formats", "Alignments", "OrderedList", "UnorderedList", 
        "Outdent", "Indent", "|", 
        "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "Print", 
        "SourceCode", "FullScreen", "|", "Undo", "Redo" }; 
             
    return View(); 
} 
 
 
Please check the above code snippet and the sample and let us know if it resolves your issue. 
 
Regards, 
Revanth 


Marked as answer
JH james hols March 4, 2021 09:09 PM UTC

thank you . It worked well
But there is no Justify in Print Preview
Another question: when the print button is clicked, can the paper size be set in Print Preview? For example A4 or A5

RK Revanth Krishnan Syncfusion Team March 5, 2021 06:20 AM UTC

Hi James, 
 
 
Good day to you. 
 
 
We have validated your queries, 
 
Query 1: “There are no Justify styles set in print preview” 
 
This requirement can be achieved by setting the required CSS styles for the “@media print” for the class “.e-content”. We have prepared a sample for your reference, 
 
Code Snippet: 
 
rtePrintStyle.css 
@media print { 
    .e-content { 
        text-align: justify; 
    } 
} 
Note: The print styles should be used as the external CSS file to work properly. 
 
Views/Shared/_Layout.cshtml 
<head> 
    . . . 
    <link rel='nofollow' href="~/css/rtePrintStyle.css" rel="stylesheet" /> 
head> 
 
 
Please check the above code snippet and the sample and let us know if it satisfies the requirement. 
 
Query 2: “When the print button is clicked, can the paper size be set in Print Preview? For example A4 or A5” 
 
The print page sizes can’t be configured from the Rich Text Editor while printing the content. Instead, you can choose the desired page sizes in the print options(More settings) option before printing them. 

Regards,
Revanth

Loader.
Up arrow icon