Интеграция текстового редактора Quill в приложение Angular

Я учусь создавать сайты для блогов. Сначала я попробовал простой пример. Но текстовый редактор не отображается на моем экране. Я установил Quill с помощью команды npm install --save [email protected] ngx-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 и FormControl из @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. Скажите, пожалуйста, чего еще мне не хватает в этом проекте.


angular quill ngx-quill
person Tanzeel    schedule 23.08.2019    source источник
comment
Привет, я пытаюсь реализовать ngx-quill, но получаю сообщение об ошибке forRoot () i, e. Свойство forRoot не существует для типа typeof QuillModule. Моя угловая версия - 4.11.10, а ngx-quill - 3.6.0. Есть какие-нибудь рекомендации по решению этой проблемы? Спасибо   -  person Pragati Kerur    schedule 23.04.2020
comment
@PragatiKerur, вы добавили QuillModule.forRoot() в свой imports:[] массив класса модуля?   -  person Tanzeel    schedule 24.04.2020

Ответы (2)


arrow_upward
4
arrow_downward

Это означает, что вы не настроили эту библиотеку должным образом, в частности, вы должны импортировать QuillModule.forRoot(), чтобы все поставщики, поставляемые с этой библиотекой, были правильно инициализированы.

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

Кстати, вот как в документации < / a> нам это делать.

person yurzui    schedule 23.08.2019
comment
Я тоже это сделал. Вот мой app.module.ts. import { QuillModule} from 'ngx-quill'; `импорт: [BrowserModule, QuillModule, ReactiveFormsModule] ....... - person Tanzeel; 23.08.2019
comment
Обратите внимание на .forRoot() звонок - person yurzui; 23.08.2019
comment
Спасибо за это. Это сработало. Но скажите, пожалуйста, почему .forRoot(). Я следил за видео на YouTube. Его там не было, но он все еще работал на того парня. - person Tanzeel; 23.08.2019
comment
Потому что только с forRoot мы получаем этого провайдера конфигурации Возможно, в том видео этот парень использовал старую версию, в которой forRoot не существовало. - person yurzui; 23.08.2019
comment
Ох, хорошо. Теперь я понимаю. Спасибо. Кстати, этот человек использует Angular 7, и видео было опубликовано в этом году, в феврале 2019 года. Вот ссылка youtube.com/watch?v=Sh3_k_QPGzw - person Tanzeel; 23.08.2019
comment
На видео был установлен ngx-quill 4.6.3. У вас 7 версия. Теперь вы можете проверить журнал изменений github.com/KillerCodeMonkey/ngx-quill/releases /tag/7.0.0 - person yurzui; 23.08.2019

arrow_upward
27
arrow_downward

Выполните следующие действия, все должно работать:

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
  • включите стили темы: bubble.css, snow.css или quilljs в свой index.html или добавьте их в файлы css / scss с помощью операторов @import, или добавьте их внешние стили в процесс сборки.

Обновите файл 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

person MJ X    schedule 20.12.2019
comment
Да, я просто добавил дополнительные детали, которых не хватало в ответе, чтобы помочь некоторым младшим разработчикам и сэкономить время ... :) - person MJ X; 23.12.2019
comment
Я ценю этот жест. :-) - person Tanzeel; 24.12.2019
comment
npm install rxjs - одноранговые зависимости rxjs-quill выдают ошибку - person siddharth shah; 07.04.2020
comment
Большое спасибо @MJX, ты спас мне день - person thadaBoy; 16.10.2020