如何解决如何在 angularjs 中转义 HTML 字符我读过使用 ng-blind / ng-sanitize 来转义 Html,但无法实现它
我是 Angular Js 的新手。我使用 ngx-editor 制作具有不同格式样式的文本区域。当我提交内容时,我会同时获得 HTML 标签。我知道每当我在文本区域中输入内容并使用不同的格式样式时,这些标签就会出现,例如将内容设为粗体、斜体、h1、h2、h3 等。
我不希望这些标签显示在浏览器上。请为我提供解决方案并解释为什么 HTML 标签与内容一起显示在浏览器上。
代码片段
component.html
<div class = "NgxEditor__Wrapper" >
<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor [editor]="editor" required placeholder="Write Content" formControlName="contentData"> </ngx-editor>
</div>
<mat-error *ngIf="blogForm.get('contentData').hasError('required')">
Description is Required!
</mat-error>
component.ts
import { Component,OnInit,OnDestroy,ViewEncapsulation } from '@angular/core';
import { AbstractControl,FormControl,FormGroup } from '@angular/forms';
import { Validators,Editor,Toolbar } from 'ngx-editor';
@Component({
selector: 'app-root',templateUrl: 'app.component.html',styleUrls: ['app.component.scss'],encapsulation: ViewEncapsulation.None,})
export class AppComponent implements OnInit,OnDestroy {
editor = new Editor;
toolbar: Toolbar = [
['bold','italic'],['underline','strike'],['code','blockquote'],['ordered_list','bullet_list'],[{ heading: ['h1','h2','h3','h4','h5','h6'] }],['link','image'],['text_color','background_color'],['align_left','align_center','align_right','align_justify'],];
ngOnInit(): void {
this.editor = new Editor();
}
ngOnDestroy(): void {
this.editor.destroy();
}
initializeForm(){
this.blogForm = this.fb.group({
contentData: ['',Validators.required],});
} }
contentData: this.blogForm.value.contentData,
输入
输出:
<p><strong><span style="color:rgb(0,0);"><span style="background-
color:rgb(255,255,255);">Lorem</span></span></strong><span
style="color:rgb(0,0);"><span style="background-color:rgb(255,255
标签也随输出一起出现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。