如何在Angular2中使用[(ngModel)]来编辑div的contenteditable内容？

Question

我正在尝试使用ngModel来进行双向绑定div的contenteditable输入内容，如下所示：

<div id="replyiput" class="btn-input"  [(ngModel)]="replyContent"  contenteditable="true" data-text="type..." style="outline: none;"    ></div> 

但是它没有起作用，出现了一个错误：

EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''

- Kim Wong

Answer 1

NgModel期望绑定的元素具有value属性，而div没有该属性。这就是为什么会出现No value accessor错误的原因。

您可以使用textContent属性（而不是value）和input事件来设置自己等效的属性和事件数据绑定：

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `{{ title }}
        <div contenteditable="true" [textContent]="model" (input)="model = $event.target.textContent"></div>
        <p>{{ model }}</p>`
})
export class AppComponent {
    title = "Angular 2 RC.4";
    model = "some text";
    constructor() {
        console.clear();
    }
}

Plunker

我不知道所有浏览器是否都支持对于 contenteditable 元素的 input 事件，你可以尝试绑定一些键盘事件来代替。

- Mark Rajcok

---

@KimWong，我提供的 Plunker 中 model 变量肯定是会改变的。这就是为什么我在视图/模板中放置了 {{model}}，以便我们可以在编辑 div 时看到它的变化。 - Mark Rajcok

无论用什么事件来触发model=$event.target.textContent，这在Firefox和Edge浏览器上都不能正常工作。当输入时，光标总是设置在索引0处。你应该注意这一点。 - Lys

各位，有人知道如何解决光标索引始终设置为0的问题吗？ - Chris Tarasovs

这在IE中不起作用。只需在IE中打开plunker即可。 - Ziggler

目前这只对反向输入有用。 - szaman

Answer 2

更新的答案（2017-10-09）:

现在我有一个ng-contenteditable模块，它与Angular表单兼容。

旧的答案（2017-05-11）： 在我的情况下，我可以简单地这样做：

<div
  contenteditable="true"
  (input)="post.postTitle = $event.target.innerText"
  >{{ postTitle }}</div>

在这里，post是具有属性postTitle的对象。

第一次，在ngOnInit()之后从后端获取到post后，我会在我的组件中设置this.postTitle = post.postTitle。

- ktretyak

---

如果允许用户在移动到另一个屏幕后编辑其响应（预设值），则此方法将无效。 - Muhammad bin Yusrat

Answer 3

这里有一个可工作的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();

  /**
   * 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中进行了测试。

- tobek

---

在 Firefox 和 Windows 上测试过，在 Ionic 2 下，你的代码也能正常运行。谢谢！ - Cel

Answer 4

这是另一个版本，基于@tobek的答案，支持HTML和粘贴。请查看此链接。

import {
  Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges, OnChanges,
  HostListener, Sanitizer, SecurityContext
} from '@angular/core';

@Directive({
  selector: '[contenteditableModel]'
})
export class ContenteditableDirective implements OnChanges {
  /** Model */
  @Input() contenteditableModel: string;
  @Output() contenteditableModelChange?= new EventEmitter();
  /** Allow (sanitized) html */
  @Input() contenteditableHtml?: boolean = false;

  constructor(
    private elRef: ElementRef,
    private sanitizer: Sanitizer
  ) { }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['contenteditableModel']) {
      // On init: if contenteditableModel is empty, read from DOM in case the element has content
      if (changes['contenteditableModel'].isFirstChange() && !this.contenteditableModel) {
        this.onInput(true);
      }
      this.refreshView();
    }
  }

  @HostListener('input') // input event would be sufficient, but isn't supported by IE
  @HostListener('blur')  // additional fallback
  @HostListener('keyup') onInput(trim = false) {
    let value = this.elRef.nativeElement[this.getProperty()];
    if (trim) {
      value = value.replace(/^[\n\s]+/, '');
      value = value.replace(/[\n\s]+$/, '');
    }
    this.contenteditableModelChange.emit(value);
  }

  @HostListener('paste') onPaste() {
    this.onInput();
    if (!this.contenteditableHtml) {
      // For text-only contenteditable, remove pasted HTML.
      // 1 tick wait is required for DOM update
      setTimeout(() => {
        if (this.elRef.nativeElement.innerHTML !== this.elRef.nativeElement.innerText) {
          this.elRef.nativeElement.innerHTML = this.elRef.nativeElement.innerText;
        }
      });
    }
  }

  private refreshView() {
    const newContent = this.sanitize(this.contenteditableModel);
    // Only refresh if content changed to avoid cursor loss
    // (as ngOnChanges can be triggered an additional time by onInput())
    if (newContent !== this.elRef.nativeElement[this.getProperty()]) {
      this.elRef.nativeElement[this.getProperty()] = newContent;
    }
  }

  private getProperty(): string {
    return this.contenteditableHtml ? 'innerHTML' : 'innerText';
  }

  private sanitize(content: string): string {
    return this.contenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
  }
}

- Rene Hamburger

---

谢谢，但为了避免ExpressionChangedAfterItHasBeenCheckedError错误，请在输出@Output() contenteditableModelChange?= new EventEmitter(true);中使用异步EventEmitter。参考文章。也许您可以更新您的代码。 - Atiris

Answer 5

我已经尝试过这些解决方案，现在将在我的项目中使用以下解决方案：

<div #topicTitle contenteditable="true" [textContent]="model" (input)="model=topicTitle.innerText"></div>

我更喜欢使用模板引用变量而不是"$event"。

相关链接: https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable

- Flo

---

我也在可编辑的TD上使用了这个解决方案。一些其他解决方案中建议的{{model}}在输入时会导致问题。它会动态更新文本，而我最终得到一些乱码。但是，使用这个解决方案没有发生这种情况。 - p0enkie

我喜欢这个解决方案，但在火狐浏览器中也会反向输入。 - illnr

Answer 6

在 contenteditable 中，我通过使用 blur 事件和 innerHTML 属性实现了 双向绑定。

在 .html 文件中：

<div placeholder="Write your message.."(blur)="getContent($event.target.innerHTML)" contenteditable [innerHTML]="content"></div>

在.ts文件中：

getContent(innerText){
  this.content = innerText;
}

- Sahil Ralkar

---

当使用 $event.target 的 innerHTML 在你的 save 方法中时（就像我通常做的那样），这个工作得很好。这里内部 HTML 保持一致：两种方式都是 innerHTML。 - Jan Croonen

Answer 7

对我来说，只使用JavaScript而不使用ts对象就足够了。 HTML：

 <div
        id="custom-input"
        placeholder="Schreiben..."
</div>

TS:

• 获取输入值的方法：document.getElementById("custom-input").innerHTML

• 设置输入值的方法：document.getElementById("custom-input").innerHTML = "myValue"

一切都运行得很完美。我被迫使用 div 而不是 ionic ion-textarea，因为我在自动调整大小方面遇到了问题。使用 ion-textarea 我只能使用 js 进行自动调整大小。现在我使用 CSS 进行自动调整大小，我认为这更好。

- FAndrew

Answer 8

如果您绑定的是字符串，这里有一个简单的解决方案，不需要任何事件。只需在表格单元格内放置一个文本框输入并绑定到该文本框即可。然后将文本框格式设置为透明。

HTML:

<tr *ngFor="let x of tableList">
    <td>
        <input type="text" [(ngModel)]="x.value" [ngModelOptions]="{standalone: true}">
    </td>
</tr>

- Isaac