在这里工作 Plunkr http://plnkr.co/edit/j9fDFc,但下面的相关代码。
绑定和手动更新textContent
对我不起作用,它不处理换行符(在 Chrome 中,在换行符后键入会将光标跳回开头)但我能够使用https中的 contenteditable 模型指令使其工作://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/。
我使用 对其进行了调整以处理多行纯文本(带\n
s,而不是<br>
s)white-space: pre-wrap
,并将其更新为使用keyup
而不是blur
. 请注意,此问题的某些解决方案使用IE 或 Edge元素尚不input
支持的事件。contenteditable
这是代码:
指示:
import {Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges} from 'angular2/core';
@Directive({
selector: '[contenteditableModel]',
host: {
'(keyup)': 'onKeyup()'
}
})
export class ContenteditableModel {
@Input('contenteditableModel') model: string;
@Output('contenteditableModelChange') update = new EventEmitter();
/**
* By updating this property on keyup, and checking against it during
* ngOnChanges, we can rule out change events fired by our own onKeyup.
* Ideally we would not have to check against the whole string on every
* change, could possibly store a flag during onKeyup and test against that
* flag in ngOnChanges, but implementation details of Angular change detection
* cycle might make this not work in some edge cases?
*/
private lastViewModel: string;
constructor(private elRef: ElementRef) {
}
ngOnChanges(changes: SimpleChanges) {
if (changes['model'] && changes['model'].currentValue !== this.lastViewModel) {
this.lastViewModel = this.model;
this.refreshView();
}
}
/** This should probably be debounced. */
onKeyup() {
var value = this.elRef.nativeElement.innerText;
this.lastViewModel = value;
this.update.emit(value);
}
private refreshView() {
this.elRef.nativeElement.innerText = this.model
}
}
用法:
import {Component} from 'angular2/core'
import {ContenteditableModel} from './contenteditable-model'
@Component({
selector: 'my-app',
providers: [],
directives: [ContenteditableModel],
styles: [
`div {
white-space: pre-wrap;
/* just for looks: */
border: 1px solid coral;
width: 200px;
min-height: 100px;
margin-bottom: 20px;
}`
],
template: `
<b>contenteditable:</b>
<div contenteditable="true" [(contenteditableModel)]="text"></div>
<b>Output:</b>
<div>{{text}}</div>
<b>Input:</b><br>
<button (click)="text='Success!'">Set model to "Success!"</button>
`
})
export class App {
text: string;
constructor() {
this.text = "This works\nwith multiple\n\nlines"
}
}
到目前为止,仅在 Linux 上的 Chrome 和 FF 中进行了测试。