如何在 Angular 中安装 Quill.js

Question

抱歉，我对包装工作原理的理解Angular很糟糕！我想WYSIWYG在我的Angular6应用程序中使用编辑器。我已经归零到了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

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

我可以看到node_modules有一个quill文件夹，其中有dist/quill.js我认为Quill必须定义和导出对象的位置（但尚未检查）。

我究竟做错了什么？

Answer 1

按照以下简单步骤在Angular应用程序中安装 quilljs

安装以下软件包

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

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

"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演示。