angular 中无法将样式传递给 quill-editor 组件

Question

我正在尝试为 app.component.ts 中的 app.component.html 中的标签设置样式，但它不是 working.There 类似的问题和文章，但即使是已接受的答案也不适合我。这是我的代码。

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>

而我的app.component.ts是

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);
  }
}

我尝试过的事情：

[style]="editorStyle" //不工作

然后我尝试直接 [style.backgroundColor]="'red'" 做，有和没有额外引号 [style.backgroundColor]='red'.

我也尝试了 [ngStyle]="{backgroundColor: 'red'}" 和 [ngStyle.backgroundColor]="'red'"'。但是没有什么对我有用。问题仅出在 editorStyle 而不是 config。我也收到了这个警告。

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

Answer 1

也许您遇到了阴影 Dom 的问题，这会阻止样式应用于阴影 dom 下的组件。更详细的解释在这里： https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Angular有自己的处理shadow的方法dom，而且是封装 https://angular.io/api/core/ViewEncapsulation

用这个修改你的 app.component @Component 注释并试一试

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

这是不可取的，因为阴影 dom 对于保持对样式的控制非常有用。在你的 app.component 中使用 'None' 封装可能会有风险，所以我认为更好的解决方案是将你的 quill 编辑器包装在一个自定义组件中，该组件唯一的责任就是渲染编辑器。这样，您仅将 ViewEncapsulation.None 应用于此组件。

Answer 2

我为你试试这个：

您可以在那里编辑以更正您的问题！

here

Answer 3

Quill 编辑器使用自定义 styles 字段来传递样式，因此

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

你应该指定

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

这与标准 dom 元素的样式不同

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

angular 中无法将样式传递给 quill-editor 组件

Unable to pass styles to quill-editor component in angular

property-binding

quill

angular