在Angular应用程序中集成Quill文本编辑器 [英] Integrating Quill text editor in an Angular application

问题描述

我正在学习如何创建博客网站.我首先尝试了一个简单的例子.但是文本编辑器没有显示在我的屏幕上.我使用 npm install --save quill@1.3.6 ngx-quill 命令安装了Quill.我的 app.component.html 非常简单.

I am learning how to create blogging websites. I tried a simple example first. But the text editor is not showing up on my screen. I installed Quill with npm install --save quill@1.3.6 ngx-quill command. My app.component.html is very simple.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand ml-auto mr-auto" href="#">Quill JS Editor with Angular</a>
</nav>

<div class="container">
  <div class="row pt-5">
    <div class="col-md-8">
      <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="editor">
            <h3>Editor</h3>
          </label>
          <quill-editor></quill-editor>
        </div>
      </form>
    </div>
    <div class="col-md-4 bg-light p-4">
      <h3>Output</h3>
      <p class="my-5"></p>
    </div>
  </div>
</div>

实际上它应该看起来像.

Actually it should look like.

我还从 app.component.ts 中的 @ angular/forms 中导入了 FormGroup 和 FormControl 其中包含以下代码.

I have also imported FormGroup and FormControl from @angular/forms in my app.component.ts which contains the following code.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  editorForm: FormGroup;
  ngOnInit() {
    this.editorForm = new FormGroup({
      'editor': new FormControl(null)
    })
  }
}

但是我收到此错误.

整个项目位于 github 上.请告诉我这个项目还有什么我想念的.

The entire project is on github. Please tell me what else I am missing in this project.

推荐答案

这意味着您没有正确配置该库，尤其是应该导入 QuillModule.forRoot()，以便所有随该库提供程序已正确初始化.

It means you haven't configured that library properly, particularly you should be importing QuillModule.forRoot() so that all delivered with this library providers are properly initialized.

@NgModule({
  imports: [
    BrowserModule,
    QuillModule.forRoot(),
...

顺便说一句，这就是文档告诉我们要做的.

Btw, this is how documentation tells us to do it.

这篇关于在Angular应用程序中集成Quill文本编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！