angular - 如何在 ngx-quill 编辑器中填充数据并保持格式不变？

Question

我能够以角度创建 ngx-quill 编辑器。我无法理解如何在编辑器中填充数据。羽毛笔编辑器返回 html 和 delta 对象。当下次用户访问该页面时，我看不到任何关于如何将其填充到编辑器中的选项。

QuillJs 有一些 API，例如 setContents，但它需要使用 quill 实例调用，并且在 Angular 中我无法理解如何获取 quill 实例然后调用 setContents 方法。

在此先感谢您的帮助。

Answer 1

以防万一有人想用 html 格式填充数据，甚至不使用响应式表单，那么这可能是一个建议。在 HTML 中：

<quill-editor
  [styles]="{ height: '400px' }"
  id="textEditor"
  (onContentChanged)="contentChanged($event)"
  (onEditorCreated)="created($event)"
>

在 .TS 中：

 created(event: any) {
    console.log(event);
    var html = localStorage.getItem('html');
    if (html != null) {
      event.root.innerHTML = html;
    }
  }

  changedEditor(event: EditorChangeContent | EditorChangeSelection) {}

  contentChanged(obj: any) {
    localStorage.setItem('html', obj.html);
  }

基本上你在这里做的是你在 localStorage 中编辑内容时存储 HTML 文件，实际上你希望将它存储在数据库中，然后在每次加载编辑器时调用的 created 方法中，同时渲染你的屏幕在 editor.root.innerhtml 中分配 HTML

Answer 2

你可以使用ngModel->

ngModel - 为模板驱动的表单设置初始值或允许双向数据绑定

检查ngx-quill