Редактор Quill не отображается должным образом в приложении Angular 8 - PullRequest
Новая
       9

Редактор Quill не отображается должным образом в приложении Angular 8

1 голос
/ 07 февраля 2020

Я пытаюсь добавить текстовый редактор Quill в мой проект Angular 8, но он не корректно рендерится в браузере.

В консоли нет ошибок, и это то, что отображается в браузере:

screen

Я выполнил шаги установки, как указано здесь .

Также в моем angular. json указано следующее: 

"styles": [
    "src/styles.css",
    "./node_modules/quill/dist/quill.core.css",
    "./node_modules/quill/dist/quill.snow.css"
    ],
"scripts": ["./node_modules/quill/dist/quill.js"]

Вот импорт в моем NgModule: 

imports: [
    BrowserModule,
    AppRoutingModule,
    QuillModule.forRoot()
],

А вот мой HTML: 

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

Может кто-нибудь подсказать, пожалуйста, почему редактор не рендерит правильно>

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Согласно источнику : "не забудьте включить quill + theme css в ваш процесс сборки, модуль или индекс. html!".

Однако я был видеть то же поведение, когда я включил стиль "./node_modules/quill/dist/quill.snow.css" в angular. json. Изменение стиля. css устраняет проблему. Добавьте следующее в начале вашего стиля. css: 

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
1 голос
/ 07 февраля 2020

Я использую quill в своем проекте angular, и я не уверен, почему у вас есть эти жестко заданные пути в вашем angular json - также есть пакет, который упаковывает quill в angular модуль, я думаю, это то, что вы ожидаете определить QuillModule, но я думаю, что вы просто ссылаетесь на источник quill, а не указываете c - angular. Я думаю, что если вы удалите этот импорт из angular. json и просто запустите: 

npm install --save quill
npm install --save ngx-quill

, а затем убедитесь, что ваш модуль quillModule импортируется из ngx-quill 

import { QuillModule } from 'ngx-quill';

Я не припоминаю каких-либо трудностей с его запуском и запуском, но похоже, что у вас есть библиотека quill, а не модуль angular, который выглядит как синтаксис, который вы используете / ожидаете, поэтому думаю, вам просто нужно правильно установить зависимости.

...