Quill 编辑器在 Angular 8 个应用中未按预期显示

Question

我正在尝试将 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>

谁能告诉我为什么编辑器没有正确呈现>

Answer 1

我在我的 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';

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

Answer 2

根据 source："do not forget to include quill + theme css in your buildprocess, module or index.html!"。

但是，当我在 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';

Answer 3

在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">

Answer 4

迟到总比不到好

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

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

Answer 5

确保您在 styles.css

中包含以下内容

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

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

Answer 6

您需要添加导入

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

在/webapp/content/scss/global.scss

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

Quill 编辑器在 Angular 8 个应用中未按预期显示

Quill editor not displaying as expected in Angular 8 app

quill

angular

angular8