Videos
Hello angular devs,
I'm using ngx-quill in my project. After 3395 characters the editor looses focus and in the console I see "addRange(): The given range isn't in document" Could anyone help me with this?
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.