How to set default font name and size to Rich text editor in angular 6

[dip]

In Angular 6, I have used a sync-fusion rich text editor(RTE). I have set font name and size to it as follows.

 <ejs-richtexteditor style="resize : none; font-family: Verdana; font-size : 10pt;" name="Symptoms" class="form-control " id="Symptoms" rows="5" cols="25" >

e.g. my RTE contains text/data as "This is testing template". If I click on source code button of RTE then it shows like

<p>This is testing template</p>

Means, though I have set font name and size to RTE , it does not reflect in source code. What I want is like it should show me source code as,

<p><span style="font-family: Verdana;"><span style="font-size: 10pt;">This is testing template</span></span></p>

To show like above source code, I have to do "select All" content of RTE and then set font and size explicitly by clicking/selecting on font name and font size buttons on RTE. 

Then only I get style tag attached. So, I have to always select all contents of RTE and then set font and size which is very hectic. So, how can I set the same by default in source code of RTE.

[Indrajith Srinivasan]

Hi Dip, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. You can set the default font-family and font-size to the Rich Text Editor, by using the CSS to the class (e-richtexteditor). We have also prepared a sample that tries to meet your requirements. 

 

CSS style: 

 

 

.e-richtexteditor { 

      font-family: "Verdana"; 

      font-size: 10pt !important; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-fg5fmu?file=app.component.html  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith