CODEWITHSUNDEEP
angularangular8quill
user9847788
user9847788

Reputation: 2445

Quill editor not displaying as expected in Angular 8 app

I am trying to add the Quill text editor to my Angular 8 project, but it is not rendering correctly on the browser.

There are no errors appearing in the console, and this is what is displayed in the browser:

screen

I followed the installation steps as outlined here.

Also, the following is mentioned in my angular.json:

"styles": [
    "src/styles.css",
    "./node_modules/quill/dist/quill.core.css",
    "./node_modules/quill/dist/quill.snow.css"
    ],
"scripts": ["./node_modules/quill/dist/quill.js"]

Here are the imports in my NgModule:

imports: [
    BrowserModule,
    AppRoutingModule,
    QuillModule.forRoot()
],

And here is my HTML:

<div id="quill">
    <p>Content *</p>
    <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config" formControlName="yourCtrlname"
required>
    </quill-editor>
</div>

Can someone please tell me why the editor isn't rendering correctly>

Upvotes: 5

Views: 9668

Answers (6)

microvo
microvo

Reputation: 41

You need to add the imports

@import '~ quill / dist / quill.core.css';
@import '~ quill / dist / quill.snow.css';

in /webapp/content/scss/global.scss

and not directly in the scss file of your module

Upvotes: 1

KarThik Ch
KarThik Ch

Reputation: 1

Make sure that you have included the following in styles.css

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';

and also make sure they are applying while serving if not, import styles.css into index.html.

Upvotes: 0

Julius
Julius

Reputation: 11

better late than never

u need to add "@import '~quill/dist/quill.snow.css';" to your styles.less worked for me after i did this.

Hope this still helps some1

Upvotes: 1

Edi
Edi

Reputation: 109

Add inside index.html, it should now display it

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

Upvotes: 6

Prashant Sharma
Prashant Sharma

Reputation: 71

As per the source: "do not forget to include quill + theme css in your buildprocess, module or index.html!".

However, I was seeing the same behavior when I included style "./node_modules/quill/dist/quill.snow.css" in angular.json. Changing it to style.css resolves the issue. Add the following at the start of your style.css:

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';

Upvotes: 3

chairmanmow
chairmanmow

Reputation: 650

I'm using quill in my angular project and I'm not sure why you have those hard-coded paths in your angular json - also there is a package that wraps quill in an angular module, I think that's what you're expecting to be defined by QuillModule, but I think you're just referencing the quill-source, not specific to angular. I think if you remove those imports from angular.json and just run :

npm install --save quill
npm install --save ngx-quill

And then make sure you in your module your quillModule is importing from the ngx-quill

import { QuillModule } from 'ngx-quill';

I don't recall encountering any difficulties getting it up and running, but it looks like you have the quill library, but not the angular module - which seems to be the syntax you're using/expecting, so think you just need to install dependencies properly.

Upvotes: 1

Related Questions