I am learning how to create blogging websites. I tried a simple example first. But the text editor is not showing up on my screen. I installed Quill with npm install --save [email protected] ngx-quill
command. My app.component.html
is very simple.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand ml-auto mr-auto" href="#">Quill JS Editor with Angular</a>
</nav>
<div class="container">
<div class="row pt-5">
<div class="col-md-8">
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor></quill-editor>
</div>
</form>
</div>
<div class="col-md-4 bg-light p-4">
<h3>Output</h3>
<p class="my-5"></p>
</div>
</div>
</div>
Actually it should look like.
I have also imported FormGroup
and FormControl
from @angular/forms
in my app.component.ts
which contains the following code.
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
editorForm: FormGroup;
ngOnInit() {
this.editorForm = new FormGroup({
'editor': new FormControl(null)
})
}
}
But I am getting this error.
The entire project is on github. Please tell me what else I am missing in this project.
ngx-quill is an angular (>=2) module for the Quill Rich Text Editor containing all components you need.
Quill editor for AngularX.
Quill Rich Text Editor QuillJS is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and open sourced by Salesforce.
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
@import
statements, 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With