[英]AngularJS - How to escape html in ng-model in a textarea field?
[英]How to escape HTML character in angularjs. I have read using ng-blind / ng-sanitize to escape Html, but not able to implement it
我是 Angular Js 的新手。 我使用 ngx-editor 制作了具有不同格式 Styles 的文本区域。 当我提交内容时,我会收到 HTML 标签。 我知道每当我在文本区域中输入内容并使用不同的格式 styles 时,这些标签就会出现,比如使内容变为粗体、斜体、h1、h2、h3 等。
我不希望这些标签显示在浏览器上。 请为我提供解决方案并解释为什么 HTML 标记与内容一起显示在浏览器上。
代码片段
组件.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>
组件.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],
});
} }
内容数据:this.blogForm.value.contentData,
输入
Output:
<p><strong><span style="color:rgb(0, 0, 0);"><span style="background-
color:rgb(255, 255, 255);">Lorem</span></span></strong><span
style="color:rgb(0, 0, 0);"><span style="background-color:rgb(255, 255
标签也与 output 一起提供。
现在回答这个问题已经很晚了,但我最近遇到了同样的问题。
您必须将 div 的 innerHtml 属性绑定到编辑器内容。 然后浏览器对其进行解释,并以正确的格式显示,就像在编辑器中一样:
<div [innerHTML]="editor.html"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.