在Angular 2中，与羽毛笔编辑器绑定的html数据未按预期显示^

Question

我正在尝试在Angular应用程序中集成主轴编辑器。在这里，我正在使用ngx-quill npm模块。 我的问题是，当我使用Blockquote，Code block时，当我使用innerHtml绑定它们时，它们没有按预期显示

请查看以下附件。

这是angular.json

中添加的样式

 "styles": [
          "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
          "src/styles.scss",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/quill/dist/quill.bubble.css",
          "./node_modules/quill/dist/quill.snow.css",
          "./node_modules/quill-emoji/dist/quill-emoji.css",
          "./node_modules/quill-mention/dist/quill.mention.min.css"
        ],

有人可以帮我吗？

谢谢。

Answer 1

您将需要制作自己的CSS类来设置输出样式。 Quill的CSS样式仅限于编辑器。如果您希望所有代码块都以这种方式设置样式，或者只是特定代码块根据类名进行样式设置，则取决于您。

如果您右键单击编辑器中的代码并检查元素，chrome将为您显示在编辑器中应用于该对象的CSS样式。

对于代码/前置示例，这是

.ql-snow .ql-editor pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
}

如果要重复使用所有的“笔型”，可以像这样将div包裹在要设置innerHtml的位置。我不能保证羽毛笔会为HTML输出输出相同的类，但是对于pre.ql-syntax来说似乎确实如此。 https://stackblitz.com/edit/ngx-quill-example-mkuhbp?file=src%2Fapp%2Fapp.component.html

  <div class="ql-snow">
    <div class="ql-editor" [innerHtml]="htmlText"></div>
  </div>

Answer 2

对于功能用途

我也遇到了这个问题，cjd82187 的答案不适用于如下所示的 html 代码，

<ul><li><strong>This slipcase includes the following books:</strong></li><li class=\"ql-indent-1\"><span style=\"color: rgb(230, 0, 0); background-color: rgb(235, 214, 255);\">Winnie the Pooh and some Bees</span></li><li class=\"ql-indent-1\"><span style=\"color: rgb(230, 0, 0); background-color: rgb(235, 214, 255);\">Pooh Goes Visiting and Pooh and Piglet nearly catch a Woozle</span></li><li><strong>Author:</strong> A.A Milne</li><li><strong>Reading Age:</strong> <span style=\"color: rgb(230, 0, 0);\">3+ years</span></li></ul>

这包含一个内联样式类，这些类不适用于 innerHtml。为此，您可以使用 HTML transform。这是我用来解决这个问题的方法。

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer){}

transformHtml(htmlTextWithStyle): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

<div class="ql-snow">
  <p class="ql-editor" [innerHtml]="transformHtml(yourHtmlText)"></p>
</div>