羽毛笔编辑器在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

根据source：“不要忘记在构建过程，模块或index.html中包括羽毛笔和主题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';

Answer 2

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

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

然后确保您在模块中已从ngx-quill导入quillModule

import { QuillModule } from 'ngx-quill';

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

Answer 3

迟到总比不到好

u需要添加“ @import'〜quill / dist / quill.snow.css';”根据您的风格 我做了这个之后就为我工作了。

希望这对某些人还是有帮助

Answer 4

您需要添加导入

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

在/webapp/content/scss/global.scss

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

Answer 5

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

确保您已在 styles.css

中包含以下内容

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

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