1

我正在尝试将羽毛笔编辑器集成到 Angular 应用程序中。这里我使用的是ngx-quillnpm 模块。我的问题是当我使用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"
        ],

有人可以帮我吗。

提前致谢。

4

2 回答 2

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>
于 2021-06-11T21:01:05.133 回答
2

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

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

chrome 检查器示例

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

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

如果你想重用所有的 Quill 样式，你可以像这样包装你设置 innerHtml 的 div。我不能保证 quill 会为 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>
于 2020-07-07T15:19:39.093 回答