Настройка панели инструментов Ngx-quill не работает - quill Невозможно импортировать модули - PullRequest
Новая
       22

Настройка панели инструментов Ngx-quill не работает - quill Невозможно импортировать модули

0 голосов
/ 27 ноября 2018

ОБНОВЛЕНИЕ: я спас корабль, когда понял, что у PrimeNg была реализация с иглой, и я уже использовал PrimeNg.Сначала не работал, но исправлял бета-версию 7 и ngrx 7.https://www.primefaces.org/primeng/#/editor

Я пытаюсь настроить текстовый редактор ngx-quill в моем проекте с более полной панелью инструментов, чем панель по умолчанию.Я просто копирую этот фрагмент кода из документации и еще не настроил (пока!).

Я не получаю никаких ошибок браузера, если я не включаю атрибут modules, но мне интересно, есть ли проблема с импортом, которая появляется только при попытке добавить ее?

инструкции.html 

 <quill-editor modules="editorOptions"></quill-editor>

инструкция.тс 

import { Component, Input, Output, EventEmitter } from '@angular/core';
  import * as Quill from 'quill';

@Component({
    selector: 'instructions',
    templateUrl: '../admin/instructions.html'
})

export class Instructions {
    public editorOptions = {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean'],                                         // remove formatting button

            ['link', 'image', 'video']                         // link and image, video
        ]
    };

Ошибки в браузере: Quill cannot load modules

1 Ответ

0 голосов
/ 28 марта 2019

Привет, вы можете получить эту ошибку, потому что modules является вводом и должен быть заключен в скобки 

 <quill-editor
    theme="bubble"
    [placeholder]="editorPlacehorder"
    [modules]="moduleConfig"
    [(ngModel)]="ngModelValue"
    (onContentChanged)="onContentChanged($event)">
  </quill-editor>

И убедитесь, что вы импортировали в свой модуль QuillModule 

import { QuillModule } from 'ngx-quill';

также добавьте этот модуль для импорта архива в ваш файл модуля для ex.AppModule 

imports: [
    QuillModule
]

, а также убедитесь, что вы импортировали в angular.json весь файл, чтобы заставить Quill работать 

  "styles": [
          "node_modules/quill/dist/quill.core.css",
          "node_modules/quill/dist/quill.bubble.css",
          "node_modules/quill/dist/quill.snow.css",
          "node_modules/quill-emoji/dist/quill-emoji.css",
          "node_modules/quill-mention/dist/quill.mention.min.css"
        ],
        "scripts": [
          "node_modules/quill/dist/quill.min.js",
          "node_modules/quill-mention/dist/quill.mention.min.js"
        ]

Я надеюсь, что это может сработать для вас, если у вас есть какие-либо вопросыне стесняйтесь спрашивать их!

...