1

I am using PrimeNG for an Editor which is using QuillJS. Here's a piece of my code using Editor:

<div class="form-group col-md-10">
 <label class="control-label">
  Email Content:
 </label>
 <div class="form-group">
   <p-editor [(ngModel)]="emailContent" formControlName="emailContent"></p-editor>
 </div>
</div>

I want to use custom fonts in the toolbar options but i cannot find a way using only Typescript and NOT Javascript code. I tried with this code:

<p-editor [(ngModel)]="emailContent" formControlName="emailContent">
 <p-header>
  <div id="toolbar-container">
   <select class="ql-font">
    <option selected>Aref Ruqaa</option>
    <option value="mirza">Mirza</option>
    <option value="roboto">Roboto</option>
   </select>
  </div>
 </p-header>
</p-editor>

CSS:

/* Set dropdown font-families */
#toolbar-container .ql-font span[data-label="Aref Ruqaa"]::before {
 font-family: "Aref Ruqaa";
}
#toolbar-container .ql-font span[data-label="Mirza"]::before {
 font-family: "Mirza";
}
#toolbar-container .ql-font span[data-label="Roboto"]::before {
 font-family: "Roboto";
}
/* Set content font-families */
.ql-font-mirza {
 font-family: "Mirza";
}
.ql-font-roboto {
 font-family: "Roboto";
}

Still haven't figured it out. Any help?

TheodoreTsg
  • 510
  • 3
  • 9
  • 23
  • https://stackoverflow.com/questions/43728080/how-to-add-font-types-on-quill-js-with-toolbar-options can you please take a look on this – Ragavan Rajan Nov 14 '19 at 20:04
  • I have searched a lot for this feature, including your given url, but still cannot figure it out... – TheodoreTsg Nov 15 '19 at 13:06

0 Answers0