Unable to pass styles to quill-editor component in angular

Question

I'm trying to style a tag in app.component.html from app.component.ts but its not working.There are similar questions and articles but even the accepted answers ain't working for me. Here is my code.

app.component.html

<div class="container">
  <div class="row pt-5">
    <div class="col-md-12 col-lg-12 col-sm-12 bg-light">
      <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="editor">
            <h3>Editor</h3>
          </label>
          <quill-editor [style]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
        </div>
        <button class="btn btn-primary mt-3">Submit</button>
      </form>
    </div>
  </div>
</div>

And my app.component.ts is

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;

  editorStyle = {
    height: '300px',
    backgroundColor: '#ffffff'
  }

  config = {
    toolbar: [
      ['bold', 'italic', 'underline'],
      ['code-block']
    ]
  }

  ngOnInit() {
    this.editorForm = new FormGroup({
      'editor': new FormControl(null)
    })
  }

  onSubmit() {
    console.log('submit called');
    console.log(this.editorForm.get('editor').value);
  }
}

Things I tried:

[style]="editorStyle" //Not working

Then I tried doing it directly [style.backgroundColor]="'red'" with and without extra quotes aroud value [style.backgroundColor]='red'.

I also tried [ngStyle]="{backgroundColor: 'red'}" and [ngStyle.backgroundColor]="'red'"'. But nothing is working for me. The problem is only with editorStyle and not with config. I'm also getting this warning.

WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).

What is the code for quill-editor component? If you have host bindings in it, they can wipe out the attributes on the host. — William Neely, Aug 23 '19 at 22:40

score 4 · Accepted Answer · answered Aug 23 '19 at 23:11

4

Quill editor uses a custom styles field to pass down styling, so instead of

<quill-editor [style]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>

You should specify

<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>

This is different to the styling a standard dom element

https://github.com/KillerCodeMonkey/ngx-quill

answered Aug 23 '19 at 23:11

chrismclarke

1,995
10
16

1

excellent sir. this worked. nobody told me that. I accept this answer – Tanzeel Aug 24 '19 at 06:23
most welcome, yes an easy mistake to make for sure! – chrismclarke Aug 24 '19 at 09:15
1

check https://github.com/KillerCodeMonkey/ngx-quill/blob/master/src/quill-editor.component.ts for list of input and outputs of `ngx-quill` – Manu Chadha Feb 28 '20 at 06:53

score -1 · Answer 2 · answered Aug 23 '19 at 22:30

Maybe you have a problem of shadow Dom, which prevents styles to be applied to components under shadow dom. More detailed explain here: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Angular has its own way to handle shadow dom, and it's encapsulation https://angular.io/api/core/ViewEncapsulation

Modify your app.component @Component annotation with this and give a try

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

This is not advisable as shadow dom is quite useful to keep control of your styles. And using 'None' encapsulation in your app.component can be risky so i think a better solution would be wrap your quill editor in a custom component who's only responsibility is to render the editor. This way, you are applying ViewEncapsulation.None only to this component.

No, it is not an issue of inheritance, the quill-editor component receives styles as a data input passed down (which doesn't seem to be working correctly) — chrismclarke, Aug 23 '19 at 23:09

score -1 · Answer 3 · answered Aug 23 '19 at 22:35

-1

i try this for you :

you can edit there to correct your problems!

here

answered Aug 23 '19 at 22:35

Saad

346
4
20

thanks Saad. But `height` and `backgroundColor` attributes are not changing for my text editor. thats the problem. – Tanzeel Aug 23 '19 at 22:44
see it again i do some modification – Saad Aug 23 '19 at 22:51

Unable to pass styles to quill-editor component in angular

3 Answers3