羽毛笔编辑器不显示 html 字符串

Question

我是 Angular 新手，在我的 Angular 应用程序中使用羽毛笔编辑器，我使用它来允许用户编写 HTML 代码并渲染来自后端的 HTML 代码，我正在单独的 div 中预览该 HTML，但不幸的是羽毛笔编辑器没有在编辑器中呈现任何 HTML 代码或任何文本。它是空白的并且在控制台中出现Cannot convert undefined or null to object 错误。任何形式的帮助将不胜感激。谢谢

public aboutOptions = { placeholder: "Enter About Text...", modules: false, theme: 'snow', format:'text' };

about:string = '<h1> hello world </h1>'


 onTxtEditorCreated(quill) {
    var toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', this.imageHandlerMain);
    this.txtQuill = quill;
       this.txtQuill.setContents(this.txtQuill.clipboard.convert(this.about));
  }

 <quill-editor id="about" name="about" [options]="aboutOptions" (ready)="onTxtEditorCreated($event)"  required [(ngModel)]="about">
 </quill-editor>

Answer 1

Demo

如果你没有安装

 npm install @dimpu/ngx-quill --save

在html中使用

<ngx-quill #editor  [modules]="modules"  [(ngModel)]="about" ></ngx-quill>

在组件中声明你的模型

about:string = '<h1> hello world </h1>'
  modules = {
    toolbar: [      
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['formula'], 
      ['image', 'code-block']
    ]
  };
  

如果你直接用html标签绑定字符串，quil会转换它。

replaceAll(string, search, replace) {
    return string.split(search).join(replace);
  }

用类似的代码替换你的html字符串

this.about=this.replaceAll(this.about, "<","&lt;")