Quill 编辑器在 Angular 8 应用程序中未按预期显示答案

【问题标题】：Quill editor not displaying as expected in Angular 8 appQuill 编辑器在 Angular 8 应用程序中未按预期显示
【发布时间】：2021-03-23 06:16:53
【问题描述】：

我正在尝试将 Quill 文本编辑器添加到我的 Angular 8 项目中，但它无法在浏览器上正确呈现。

控制台中没有出现错误，浏览器中显示的是这样的：

我按照here所述的安装步骤进行操作。

另外，我的 angular.json 中提到了以下内容：

"styles": [
    "src/styles.css",
    "./node_modules/quill/dist/quill.core.css",
    "./node_modules/quill/dist/quill.snow.css"
    ],
"scripts": ["./node_modules/quill/dist/quill.js"]

这是我的 NgModule 中的导入：

imports: [
    BrowserModule,
    AppRoutingModule,
    QuillModule.forRoot()
],

这是我的 HTML：

<div id="quill">
    <p>Content *</p>
    <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config" formControlName="yourCtrlname"
required>
    </quill-editor>
</div>

谁能告诉我为什么编辑器不能正确渲染>

【问题讨论】：

如果没有找到某些 js/css (404)，您是否检查过网络请求？这可能暗示某些路径错误或缺少某些参考。

标签： angular angular8 quill

【解决方案1】：

在 index.html 中添加，它现在应该显示它

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

【讨论】：

【解决方案2】：

根据source：“不要忘记在您的构建过程、模块或 index.html 中包含 quill + 主题 css！”。

但是，当我在 angular.json 中包含样式“./node_modules/quill/dist/quill.snow.css”时，我看到了相同的行为。将其更改为 style.css 即可解决此问题。在 style.css 的开头添加以下内容：

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';

【讨论】：

【解决方案3】：

我在我的 Angular 项目中使用 quill，我不确定为什么你的 Angular json 中有那些硬编码的路径 - 还有一个包将 quill 包装在一个 Angular 模块中，我认为这就是你重新期望由 QuillModule 定义，但我认为您只是在引用 quill-source，而不是特定于 Angular。我想如果你从 angular.json 中删除这些导入并运行：

npm install --save quill
npm install --save ngx-quill

然后确保在你的模块中你的 quillModule 是从 ngx-quill 导入的

import { QuillModule } from 'ngx-quill';

我不记得在启动和运行它时遇到任何困难，但看起来你有 quill 库，但没有 angular 模块 - 这似乎是你正在使用/期望的语法，所以认为你只是需要正确安装依赖项。

【讨论】：

【解决方案4】：

迟到总比没有好

你需要添加“@import '~quill/dist/quill.snow.css';”到你的style.less 在我这样做之后为我工作。

希望这仍然对一些人有所帮助1

【讨论】：

【解决方案5】：

您需要添加导入

@import '~ quill / dist / quill.core.css';
@import '~ quill / dist / quill.snow.css';

在 /webapp/content/scss/global.scss

而不是直接在模块的 scss 文件中

【讨论】：

【解决方案6】：

确保您已在styles.css 中包含以下内容

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';

并确保他们在服务时申请，如果没有，请将styles.css 导入index.html。

【讨论】：