add this line to styles section of angular.json:

"node_modules/quill/dist/quill.snow.css"
Answer from Mojtaba Nejad Poor Esmaeili on Stack Overflow
🌐
PrimeNG
primeng.org › editor
Angular Editor Component
We cannot provide a description for this page right now
Discussions

Component: Editor - Upgrade Quill to 2.0
Describe the bug Hi 👋 I'm the maintainer of Quill and we are currently working actively for Quill 2.0. Given PrimeNG is still using Quill 1.3, I'm wondering if you'd like to take a PR o... More on github.com
🌐 github.com
31
January 4, 2024
html - How To display nested json data in primeng table in angular 7 - Stack Overflow
I want to display my nested json data into my prime ng table, but I am facing an issue that when I am calling the data through the http service, its an object form and when I display it directly into More on stackoverflow.com
🌐 stackoverflow.com
I updated primeng to version 8 from 5, and the editor component doesn't look good - Stack Overflow
When updating, the editor does not display correctly, it is like it does not load the css, but I installed the quill dependency and added it to angular.json ... "styles": [ "node_modules/primeicons/primeicons.css", "node_modules/primeng/resources/primeng.min.css", "node_modules/font-awesom... More on stackoverflow.com
🌐 stackoverflow.com
Angular Editor (Quill) documentation missing angular.json styles entry
The documentation needs to be updated ... angular.json "styles" section to work correctly, otherwise the editor is useless and shows odd artifacts on the screen. Look at the StackBlitz example for this example and see what I'm talking about for the latest 16.7.2: https://primeng.org/edi... More on github.com
🌐 github.com
2
1
🌐
YouTube
youtube.com › watch
PrimeNG Editor and its Customization - Angular - YouTube
PrimeNG Editor with Examples and Its customization with QuillBelow is the full playlist of Angular PrimeNG with exampleshttps://www.youtube.com/playlist?list...
Published   October 30, 2022
🌐
JSON Formatter
jsonformatter.org › c65562
stylemodules
Online JSON Formatter and Online JSON Validator provide JSON converter tools to convert JSON to XML, JSON to CSV, and JSON to YAML also JSON Editor, JSONLint, JSON Checker, and JSON Cleaner.
🌐
PrimeNG
primeng.org › playground
PrimeNG
We cannot provide a description for this page right now
🌐
npm
npmjs.com › package › ng2-json-editor
ng2-json-editor - npm
September 19, 2023 - Angular2 component for editing large json documents. Latest version: 0.25.52, last published: 2 years ago. Start using ng2-json-editor in your project by running `npm i ng2-json-editor`. There are 4 other projects in the npm registry using ...
      » npm install ng2-json-editor
    
Published   Sep 19, 2023
Version   0.25.52
Author   Harun Urhan
🌐
UNPKG
app.unpkg.com › primeng@11.4.2 › files › editor › primeng-editor.metadata.json
primeng
primefaces/primeng · 1 lines • 7.77 kB · JSON · View Raw · 1 · {"__symbolic":"module","version":4,"metadata":{"EDITOR_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":11},"useExisting":{"__symbolic":"reference","name":"Editor"},"multi":true},"Editor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"p-editor","template":"\n <div [ngClass]=\"'p-editor-container'\" [class]=
Find elsewhere
🌐
GeeksforGeeks
geeksforgeeks.org › angular-primeng-form-editor-component
Angular PrimeNG Form Editor Component | GeeksforGeeks
April 28, 2025 - Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Form Editor Default Component in Angular PrimeNG.
🌐
GitHub
github.com › primefaces › primeng › issues › 14721
Component: Editor - Upgrade Quill to 2.0 · Issue #14721 · primefaces/primeng
January 4, 2024 - Describe the bug Hi 👋 I'm the maintainer of Quill and we are currently working actively for Quill 2.0. Given PrimeNG is still using Quill 1.3, I'm wondering if you'd like to take a PR o...
Author   luin
🌐
StackBlitz
stackblitz.com › edit › angular-json-editor
Angular Json Editor - StackBlitz
Starter project for Angular apps that exports to the Angular CLI
🌐
Stack Overflow
stackoverflow.com › questions › 58901282 › how-to-display-nested-json-data-in-primeng-table-in-angular-7
html - How To display nested json data in primeng table in angular 7 - Stack Overflow
I would recommend you to parse the JSON in-plane object format before assigning it to the table. With that JSON structure, even if you achieve with nested object, you may have to override a few table functionality like searching, sorting, etc.
Top answer
1 of 2
5

Firstly,put your component.ts

import { Editor } from 'primeng/editor';
declare var Quill: any;

and add this line in constructor

var fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['24px', '48px', '100px', '200px'];
Quill.register(fontSizeStyle, true);

At the last,change your html

<span class="ql-formats">
   <select class="ql-size">
       <option value="24px">24</option>
       <option value="48px">48</option>
       <option value="100px">100</option>
       <option value="200px">200</option>
   </select>
</span>

Example

2 of 2
0

First get the style/size whitelisted in the .ts:

constructor(){
    var fontSizeStyle = Quill.import('attributors/style/size');
    fontSizeStyle.whitelist = ['0.75em','1em','1.5em','2.5em', '24px', '48px', '100px', '200px'];
    Quill.register(fontSizeStyle, true);
}

Now in the html file we used this whitelisted options:

<span class="ql-formats">
   <select class="ql-size">
     <option value="0.75em">small</option>
     <option value="1em" selected></option>
     <option value="1.5em">large</option>
     <option value="2.5em">huge</option>
   </select>
 </span>
 <span class="ql-formats">
   <select class="ql-size">
      <option value="24px">24</option>
      <option value="48px">48</option>
      <option value="100px">100</option>
      <option value="200px">200</option>
    </select>
 </span>

Check the change of the value of the first dropdown options.

You can declare the var Quill so it doesn't have problems with the undefined variable: (this is how primeng does it too)

declare var Quill: any;

Working example here:

https://stackblitz.com/edit/quill-55477705?file=src/app/app.component.ts

🌐
GitHub
github.com › primefaces › primeng-quickstart-cli › blob › master › angular.json
primeng-quickstart-cli/angular.json at master · primefaces/primeng-quickstart-cli
December 15, 2025 - CLI Setup for PrimeNG. Contribute to primefaces/primeng-quickstart-cli development by creating an account on GitHub.
Author   primefaces
🌐
Sudheerjonna
sudheerjonna.com › blog › 2017 › 07 › 06 › nested-json-structure-usage-with-primeng-datatable
Nested JSON structure usage with PrimeNG DataTable – SudheerJonna
PrimeNG DataTable is the most popular and complex component with it’s vast features. In real-time applications, we will use HTTP module to retrieve the data from remote data sources. Most of the time we will imagine that the result JSON structure would be interpreted as flatten type.
🌐
PrimeNG
v17.primeng.org › editor
Angular Editor Component
Editor uses Quill editor underneath so it needs to be installed as a dependency.
🌐
npm
npmjs.com › package › ngx-json-viewer
ngx-json-viewer - npm
November 21, 2022 - JSON formatter / viewer for Angular. Latest version: 3.2.1, last published: 3 years ago. Start using ngx-json-viewer in your project by running `npm i ngx-json-viewer`. There are 44 other projects in the npm registry using ngx-json-viewer.
      » npm install ngx-json-viewer
    
Published   Nov 21, 2022
Version   3.2.1
Author   Vivo Xu