[英]Angular2: Contenteditable div doesn't work as expected
When server stored html text is bound to contenteditable div. 服务器存储的html文本绑定到contenteditable div时。 The html is not processed and rendered, instead it is rendered as it is.
不会处理和呈现html,而是按原样呈现。
For example,below html text from server is rendered as text instead of in html. 例如,来自服务器的以下html文本将呈现为文本而不是html。
<br>---------- Forwarded message ----------<br>From: Someone <<a href="mailto:sh@gmail.com" target="_blank">sh@gmail.com</a>>
Here is the current code: 这是当前代码:
HTML Code: HTML代码:
<div class="description-input"
placeholder="Enter Description"
ion-content
contenteditable="true"
[(contenteditableModel)]="description">
</div>
Javascript: Javascript:
import {Directive, ElementRef, Input, Output, EventEmitter, OnChanges} from "@angular/core";
@Directive({
selector: '[contenteditableModel]',
host: {
'(blur)': 'onEdit()',
'(keyup)': 'onEdit()'
}
})
export class ContentEditableDirective implements OnChanges {
@Input('contenteditableModel') model: any;
@Output('contenteditableModelChange') update = new EventEmitter();
constructor(
private elementRef: ElementRef
) {
//console.log('ContentEditableDirective.constructor');
}
ngOnChanges(changes) {
//console.log('ContentEditableDirective.ngOnChanges');
//console.log(changes);
if (changes.model.isFirstChange())
this.refreshView();
}
onEdit() {
//console.log('ContentEditableDirective.onEdit');
var value = this.elementRef.nativeElement.innerText
this.update.emit(value)
}
private refreshView() {
//console.log('ContentEditableDirective.refreshView');
this.elementRef.nativeElement.textContent = this.model
}
}
If you want to get html then use innerHTML
instead of textContent
in refreshView
如果要获取html,请在
refreshView
使用innerHTML
而不是textContent
this.elementRef.nativeElement.innerHTML = this.model
Similarly in onEdit
: 同样在
onEdit
:
var value = this.elementRef.nativeElement.innerHtml
See also 也可以看看
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.