这里有一个可工作的Plunkr http://plnkr.co/edit/j9fDFc,但相关的代码如下。
对于我来说,绑定和手动更新textContent
并不能很好地处理换行符(在Chrome中,在换行符之后输入将光标跳回开头),但我能够使用https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/中提供的可编辑内容指令模型使其正常工作。
我对它进行了微调,以便处理多行纯文本(使用\n
而不是<br>
),方法是使用white-space: pre-wrap
,并将其更新为使用keyup
而不是blur
。请注意,有些解决此问题的方案使用contenteditable
元素上不支持的input
事件。
以下是代码:
指令:
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();
private lastViewModel: string;
constructor(private elRef: ElementRef) {
}
ngOnChanges(changes: SimpleChanges) {
if (changes['model'] && changes['model'].currentValue !== this.lastViewModel) {
this.lastViewModel = this.model;
this.refreshView();
}
}
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中进行了测试。
model
变量肯定是会改变的。这就是为什么我在视图/模板中放置了{{model}}
,以便我们可以在编辑 div 时看到它的变化。 - Mark Rajcok