如何在 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

按照这些简单的步骤在 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 演示。

Answer 2

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

 import * as Quill from 'Quill';

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

Answer 3

尝试使用ngx-quill 包装器。