时间戳

首页 > 解决方案 > 羽毛笔编辑器不显示 html 字符串

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

问题描述

我是 Angular 新手，在我的 Angular 应用程序中使用羽毛笔编辑器，我使用它来允许用户编写 HTML 代码并渲染来自后端的 HTML 代码，我正在单独的 div 中预览该 HTML，但不幸的是羽毛笔编辑器不是t 在编辑器中呈现任何 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>

标签： angularquill

解决方案

演示

如果你没有安装

 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;")

推荐阅读