ngx-quill sanitize html字符串不起作用

Question

我正在尝试插入这个html：htmlBody = '<p style="color: red;">abc</p>'

<quill-editor formControlName="htmlBody" [styles]="{height: '200px'}" [modules]="modules"></quill-editor>

但我在result <p>abc</p>中有。

样式在哪里？这是角剥离他们或ngx-羽毛笔封装？

我也尝试过：

1.

<quill-editor formControlName="htmlBody" sanitize="false" [styles]="{height: '200px'}" [modules]="modules"></quill-editor>

2.

htmlBody = this.sanitizer.bypassSecurityTrustHtml(htmlBody);

但这些都帮不了我。

Answer 1

您需要为HTML元素类型注册额外的样式/属性。在下面的代码中，我将样式、宽度、高度和alt属性列为<img>元素的安全属性。将此代码紧跟在导入之后：

import { QuillModules, defaultModules } from 'ngx-quill';
import Quill from 'quill';
import ImageResize from 'quill-image-resize-module';
import ImageUploader from 'quill-image-uploader';

let BaseImageFormat = Quill.import('formats/image');
const ImageFormatAttributesList = [
  'alt',
  'height',
  'width',
  'style'
];

class ImageFormat extends BaseImageFormat {
  domNode;
  static formats(domNode) {
    return ImageFormatAttributesList.reduce(function (formats, attribute) {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }
  format(name, value) {
    if (ImageFormatAttributesList.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}

Quill.register(ImageFormat, true);
Quill.register('modules/imageResize', ImageResize);
Quill.register("modules/imageUploader", ImageUploader);

@Component({
  selector: 'news-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.scss'],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ]
})
export class ArticleComponent implements OnInit {

您可以在此处获得可为羽毛笔定制的完整格式列表：https://quilljs.com/docs/formats/