来自 quill 编辑器的绑定 html 数据未按预期显示在 Angular 2^

Question

我正在尝试将 quill 编辑器集成到 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 classes 来设置输出样式。 Quill 的 CSS 样式仅限于编辑器。如果您希望所有代码块都以这种方式设置样式，或者只是根据 class 名称以这种方式设置特定代码块的样式，则由您决定。

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

对于代码/前例，它是这样的：

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

如果你想重复使用所有的 Quill 样式，你可以包裹你正在设置 innerHtml 的 div，就像这样。我不能保证 quill 会为 HTML 输出完全相同的 classes，但对于 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>

这包含一个内联样式 class，它们不适用于 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>

来自 quill 编辑器的绑定 html 数据未按预期显示在 Angular 2^

Binding html data from quill editor is not displaying as expected in Angular 2^

css

angular

ngx-quill