Good observation by @Otrebor regarding the version of @types/quill.
I managed to install Quill with Angular 15 using:
npm i ngx-quill@21npm i @types/quill@1
as version 22 required Angular 16, and @types/quill@2 leads to the error message regarding "Delta".
Good observation by @Otrebor regarding the version of @types/quill.
I managed to install Quill with Angular 15 using:
npm i ngx-quill@21npm i @types/quill@1
as version 22 required Angular 16, and @types/quill@2 leads to the error message regarding "Delta".
Have a look at this example:
https://github.com/KillerCodeMonkey/ngx-quill-example
I had the same problem (or it seems to be) and i solved it by downgrading the package @types/quill and adding:
"allowedCommonJsDependencies": ["quill"]
to my angular.json
Videos
» npm install ngx-quill
Follow these steps it should work:
1- Installation:
npm install ngx-quill
npm install @angular/core
npm install @angular/common
npm install @angular/forms
npm install @angular/platform-browser
npm install quill
npm install rxjs — peer dependencies of rxjs-quill
- include theme stylings: bubble.css, snow.css of quilljs in your index.html, or add them in your css/scss files with
@importstatements, or add them external stylings in your build process.
Update the angular.json file with the following code:
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
“src/styles.css”,
“./node_modules/quill/dist/quill.core.css”,
“./node_modules/quill/dist/quill.snow.css”
],
“scripts”: [“./node_modules/quill/dist/quill.js”]
import it in your app.module.ts
import { QuillModule } from 'ngx-quill'
and in the imports add it like bellow
@NgModule({
declarations:[],
imports:[
CommonModule,
QuillModule.forRoot(),
]
})
in your component.ts file you can modify the editor style like bellow code:
editorStyle = {
height: '200px'
};
and in your component.html file you could call it like bellow code:
<div id="quill">
<p>Content *</p>
<quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
formControlName="yourCtrlname" required>
</quill-editor>
</div>
You can also check: https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/
and here: https://www.npmjs.com/package/ng-quill
It means you haven't configured that library properly, particularly you should be importing QuillModule.forRoot() so that all delivered with this library providers are properly initialized.
@NgModule({
imports: [
BrowserModule,
QuillModule.forRoot(),
...
Btw, this is how documentation tells us to do it.
To resolve this error for [email protected] and angular 13.1.2, you need to ensure you install the correct version of @types/quill and quill
- @types/quill v1.x -> npm i types/quill@1
- quill v1.x -> npm i quill@1
Detailed installed instructions can be found here
I also got the same issue in angular 16. For me I updated to the latest version of ngx-quill and quill and I needed to install [Yesterday 6:37 PM] Bikash Shah
npm i @types/quill@1
This worked for me.
Follow these simple steps to install quilljs in Angular application
Install the below packages
npm install quill
npm install ngx-quill
npm install @types/quill
Add the below css files in angular.json file.
"styles": ["./node_modules/quill/dist/quill.core.css",
"./node_modules/quill/dist/quill.bubble.css",
"./node_modules/quill/dist/quill.snow.css",
"src/styles.css",
]
Add the below module in app.module.ts file under
`QuillModule.forRoot({
customOptions: [{
import: 'formats/font',
whitelist: ['mirza', 'roboto', 'aref', 'serif', 'sansserif', 'monospace']
}]
})`
Add the below code in app.component.html.
<quill-editor [styles]="{height: '200px'}"></quill-editor>
I have created Stackblitz demo here.
This linked helped (https://github.com/quilljs/quill/issues/777). I had to add the following lines, however I don't really understand well how it works and what the steps mean
import * as Quill from 'Quill';
let quill = new Quill('#editor');