ngx-quill очистить строку html не работает

Question

Я пытаюсь вставить этот 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);

Но это мне не помогает.

Answer 1

Вам нужно будет зарегистрировать дополнительные стили / атрибуты для типа элемента HTML. Следующий код, который я использовал для внесения в белый список атрибутов style, width, height и 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/