14

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

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

实际上它应该看起来像。 在此处输入图像描述

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

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 上。请告诉我在这个项目中我还缺少什么。

4

3 回答 3

29

请按照以下步骤操作它应该可以工作：

1- 安装：

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/platform-browser
 npm install quill
 npm install rxjs — peer dependencies of rxjs-quill
  • 在 index.html 中包含主题样式：quilljs 的 bubble.css、snow.css，或者将它们添加到带有@import语句的 css/scss 文件中，或者在构建过程中添加它们的外部样式。

使用以下代码更新 angular.json 文件：

  “styles”: [
          “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
          “src/styles.css”,
          “./node_modules/quill/dist/quill.core.css”,
          “./node_modules/quill/dist/quill.snow.css”
        ],
        “scripts”: [“./node_modules/quill/dist/quill.js”]

将其导入您的 app.module.ts

   import { QuillModule } from 'ngx-quill'

并在导入中添加如下

 @NgModule({
  declarations:[],
  imports:[
    CommonModule,
    QuillModule.forRoot(),
  ]
 })

在您的 component.ts 文件中，您可以像下面的代码一样修改编辑器样式：

   editorStyle = {
     height: '200px'
   };

在您的 component.html 文件中，您可以像下面的代码一样调用它：

 <div id="quill">
                <p>Content *</p>
                <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
                    formControlName="yourCtrlname" required>
                </quill-editor>
            </div>

您还可以查看：https ://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/

在这里：https ://www.npmjs.com/package/ng-quill

于 2019-12-20T18:14:47.100 回答
6

这意味着您没有正确配置该库，特别是您应该导入QuillModule.forRoot()，以便正确初始化该库提供程序提供的所有内容。

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

顺便说一句，这就是文档告诉我们这样做的方式。

于 2019-08-23T19:52:45.110 回答
1

感谢@MJ X，他的回答涵盖了最多。

今天是2021-09-13，Angular v11，ngx-quill 14.3.0，回顾和补充他/她：

1) 安装

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/material
 npm install @angular/platform-browser
 npm install quill
 npm install bootstrap  // optional for better look.

2) app.module.ts

import { QuillModule } from 'ngx-quill';
@NgModule({
  declarations: [...],
  imports: [..., QuillModule.forRoot() ]

3) 根样式.css

 @import "~@angular/material/prebuilt-themes/indigo-pink.css";  /* required */
 @import '~quill/dist/quill.core.css';
 @import '~quill/dist/quill.bubble.css';
 @import '~quill/dist/quill.snow.css';
 @import "~bootstrap/dist/css/bootstrap.css";  /* optional for better look */
于 2021-09-13T23:03:43.850 回答