标签: ngx-quill

我更新了我所有的节点模块，当 quill 更新时，我的所有编辑器都在我的应用程序中崩溃了。错误“NullInjectorError：没有 InjectionToken 配置的提供者！” 出现了。

我已经解决了这个问题！只是想与可能在同一条船上的其他人分享。

您需要将 QuillModule (import { QuillModule } from 'ngx-quill';) 添加到 App Module 'Imports' 部分（或您正在使用的任何模块）。对我来说，我还需要添加 .forRoot() 以使其工作

imports: [
    QuillModule.forRoot(),
],

同样，这对我有用，只是让大家知道万一遇到相同的问题将 ngx-quill 更新到最新版本

我正在学习如何创建博客网站。我首先尝试了一个简单的例子。但是文本编辑器没有显示在我的屏幕上。我用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并FormControl从@angular/forms我的app.component.ts包含以下代码。

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

我在我的解决方案中使用 ngx-quill 作为编辑器。现在我想向工具栏添加一个自定义按钮，它将在编辑器的内容区域中插入文本。

在工具栏中，我想显示“N”，该按钮会将文本：“[Name]”插入到光标所在的编辑器内容中。我怎样才能做到这一点？

我按照基本步骤来设置 ngx-quill。经过一些研究，我还安装了 ngx-quill 和 quill。但我仍然得到同样的错误。

ERROR in Directive QuillEditorBase in .../node_modules/ngx-quill/ngx-quill.d.ts has no selector, please add it!
Cannot determine the module for class QuillEditorBase .../node_modules/ngx-quill/ngx-quill.d.ts! Add QuillEditorBase to the NgModule to fix it.

我简单地使用 eidtor <quill-editor></quill-editor>

我使用它的组件是延迟加载的。我添加QuillModule.forRoot()到我的主模块的导入中，并尝试将其添加到我的延迟加载模块中。然后我尝试将它添加到两者中，我也尝试将它添加到没有forRoot(). 错误保持不变。我不知道应该在哪里将 QuillEditorBase 添加到 ngmodule 中。

我究竟做错了什么？我没有自定义配置。我刚刚安装了它并想尝试让它工作..

更新：当我意识到 PrimeNg 有一个 quill 实现并且我已经在使用 PrimeNg 时，我放弃了。一开始无法正常工作，但升级到 angular 7 和 ngrx 7 beta 修复了问题。https://www.primefaces.org/primeng/#/editor

我正在尝试使用比默认工具栏更完整的工具栏在我的项目中设置 ngx-quill 文本编辑器。我只是从文档中复制了这个代码片段并且还没有调整（还没有！）。

如果我不包含 modules 属性，我不会收到任何浏览器错误，但我想知道是否存在仅在我尝试添加时才显示的导入问题？

说明.html

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

说明.ts

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
            [{ …

我在编译我的项目时遇到此错误

错误：node_modules/ngx-quill/lib/quill-editor.component.d.ts:3:21 - 错误 TS2614：模块“quill”没有导出成员“Delta”。您的意思是使用“从“quill”导入 Delta”来代替吗？

3 从 'quill' 导入 QuillType, { Delta };

错误：node_modules/quill-delta/dist/Delta.d.ts:1:8 - 错误 TS1259：模块 '"C:/ProyectoAgroSintesis/AgroCMS/node_modules/fast-diff/diff"' 只能使用默认导入“allowSyntheticDefaultImports”标志

1 从“fast-diff”导入差异；～～～

node_modules/fast-diff/diff.d.ts:20:1 20 导出 = diff; ~~~~~~~~~~~~~~ 该模块是使用“export =”声明的，并且只能在使用“allowSyntheticDefaultImports”标志时与默认导入一起使用。

我不知道如何解决这个问题，我按照npm 页面中的 quill 说明安装了 quill

我正在使用带有鹅毛笔编辑器的 Angular 7。用例：我有鹅毛笔编辑器，需要在双击任何按钮时附加一些文本，获取双击的值，但无法获取鹅毛笔编辑器内的光标位置。

我尝试使用 (onContentChanged)、(onEditorCreated) 和 (onSelectionChanged)，还尝试使用 onFocus，因为我必须在单个模板中使用多个鹅毛笔编辑器。

需要仅将文本附加到焦点编辑器上，但仅附加到光标位置上。

这是我的代码示例

<quill-editor #editor [maxLength]="maxLength"
          [minLength]="minLength"
          [modules]="quillConfig"
          [(ngModel)]="text"
          (onContentChanged)="contentchanged($event)"
          (onEditorCreated)="editorCreated($event)"
          [placeholder]="placeholder"
          [readOnly]="readonly"
          [required]="required"
          [style]="{height: height}"
          (onSelectionChanged)="onFocus($event)">

我正在使用ngx-quill编辑器，到目前为止它具有我需要的所有功能。但是，我没有看到有关如何删除来自剪贴板的文本的背景颜色和字体颜色的任何选项。

我想保留除颜色之外的所有其他格式。这可能吗？

我在 angular 项目中使用ngx-quill编辑器作为富文本编辑器。这样我就可以将它生成的 HTML 保存在 DB 中，然后在不同的浏览器上将其呈现为innerHTML。因为它不使用内联 CSS，并且有一个 class 属性来设置 HTML 样式，该属性指的是该编辑器的内置类。我想在这些内置类不可用的平台上呈现此 HTML。

如何在这些内置类不可用的页面上呈现 HTML？

或者

有没有办法将这些类转换为内联样式？

或者

以及是否有任何其他选项来呈现此编辑器保存的 HTML 并应用了样式？

任何帮助，将不胜感激

我的Web应用程序基于Angular，我尝试使用ngx-quill库将Quill集成到其中。我创建了仅包含不可修改的文本块（从数据库中检索到）的自定义嵌入污点，现在我尝试创建一个自定义工具栏，允许用户将该污点实例插入文本。

我的问题是，如何在Quill工具栏中创建自定义下拉菜单，在其中我可以提供自己的内容，这些内容将显示给用户并插入到文本中？

我尝试这样做：

<quill-editor>
  <div quill-editor-toolbar>
    <select class="ql-attribute">
      <option *ngFor="let attribute of documentAttributes()"
              [title]="document.data[attribute.id]"
              (click)="onAddAttribute(attribute.id)">
        {{attribute.name}}
      </option>
    </select>
  </div>
</quill-editor>

...但是下拉菜单中没有显示任何值。

看来这个问题已经为React和Plain JS解决了。但看起来这将是一个有点困难的角度这样做，尤其是当奎尔使用集成QuillEditorComponent提供通过NGX-鹅毛笔库。

无法使用角度柔性布局设置 ngx-quill 编辑器的高度。

编辑器的高度（灰色边框）溢出了父 div（红色背景）。

堆栈闪电战

如何确保编辑器位于父 div 内？