如何在 Angular 中安装 Quill.js

Question

抱歉，我对 Angular 中包装的工作原理的理解很糟糕！！我想在我的 Angular6 应用程序中使用 WYSIWYG 编辑器。我已经归零到 quill.js。 https://quilljs.com/docs/quickstart/

但我很困惑如何将它包含在我的项目中。我已将其添加为 package.json.

中的依赖项

  "dependencies": {
...
    "quill": "1.3.6"
  }

然后我尝试将其用于以下 textarea

<textarea id="question-description" type="text" class="form-control" formControlName="questionDescription" [ngClass]="validateField('questionDescription')"  rows="4"></textarea>

并初始化 Quill 就像下面 ngAfterViewInit

var quill = new Quill('#question-description', {
  theme: 'snow'
});

但我收到错误

ReferenceError: Quill is not defined
    at NewPracticeQuestionComponent.push../s

我还在组件的 .ts 文件的顶部添加了 declare var Quill:any;

我可以在 node_modules 中看到有一个 quill 文件夹并且它有 dist/quill.js 我想必须定义和导出 Quill 对象（还没有不过检查了一下。

我做错了什么？

Answer 1

尝试使用 ngx-quill 包装器。

Answer 2

此链接有帮助（https://github.com/quilljs/quill/issues/777）。我不得不添加以下几行，但是我不太了解它是如何工作的以及这些步骤的含义

 import * as Quill from 'Quill';

let quill = new Quill('#editor');

Answer 3

按照这些简单的步骤在Angular应用程序

中安装quilljs

安装以下软件包

npm install quill npm install ngx-quill npm install @types/quill

在 angular.json 文件中添加 以下 css 文件。

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

在

下的app.module.ts文件中添加下面的模块

`QuillModule.forRoot({
      customOptions: [{
        import: 'formats/font',
        whitelist: ['mirza', 'roboto', 'aref', 'serif', 'sansserif', 'monospace']
      }]
})`

在app.component.html

中添加下面的代码

<quill-editor [styles]="{height: '200px'}"></quill-editor>

我在这里创建了 Stackblitz 演示。

如何在 Angular 中安装 Quill.js

how to install Quill.js in Angular

angular

angular6

quill