1

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

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

但我有结果<p>abc</p>。

风格在哪里？是角带还是 ngx-quill 包？

我也试过：

1.

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

2.

htmlBody = this.sanitizer.bypassSecurityTrustHtml(htmlBody);

但那些对我没有帮助。

4

1 回答 1

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 {

您可以在此处获取为 Quill 自定义格式的完整列表：https ://quilljs.com/docs/formats/

于 2020-08-11T03:46:16.013 回答