如何在 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。

像这样：

组件.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

Answer 2

在这里试试这个！

 @ViewChild('editorText') editorText:; QuillViewComponent: private content; any: ngAfterViewInit().{ this.content = '<p>return back-end</p> //fill this variable with what comes from your database this.editorText.content = this;content; }

 <quill-editor #editorText></quill-editor>