如何在 Angular 的 Quill Js 编辑器中预填充数据

Question

我需要一点帮助。

我从我的 Angular 应用程序中的 api 获得了一些数据。

我想预填充我在 Quill Editor 输入框中获取的数据的值。 Quill Editor 不适用于 html value 属性，所以这不起作用：[value]="paymentMessage ? paymentMessage.message_before_payment : ''"

到目前为止，我只能将数据显示为占位符，而不是实际值。 下面是我的代码：

 <quill-editor
            [styles]="editorStyle"
            name="form"
            [placeholder]="paymentMessage ? paymentMessage.message_before_payment : ''"
            [ngModelOptions]="{ standalone: true }"
 >
 </quill-editor>

这是我得到的结果：

如果我使用[innerHtml] 属性。数据将显示在输入字段之外，而不是显示在输入字段内。

如果能得到任何帮助，我将不胜感激。

这是他们的 npm 网站的链接。 https://www.npmjs.com/package/ngx-quill

Answer 1

您好，我认为最好设置自定义值 component.ts 而不是 html。

像这样：

component.html

  <ngx-quill #editor [(ngModel)]="content" [modules]="modules"  (contentChanged)="logChange($event);"></ngx-quill>

组件.ts

export class AppComponent {
  content='my text'

  titleName = 'Angular';
  modules = {
    toolbar: [      
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  };
}

我给你一个 stackbliz 的链接，让你有一些正在运行的解决方案示例；）。

https://stackblitz.com/edit/angular-quill-editor-15qhyp

带有一些不同示例的回购链接：https://github.com/KillerCodeMonkey/ngx-quill-example