Question

我正在尝试创建一个文本编辑器，并使用可编辑的div创建了一个自定义元素。

在某些情况下，我将不得不为div的内容设置一些初始值，并在某些情况下捕获div中的类型化数据。

但是根据设置的初始值，我在同一个div上得到了三种不同的行为。

我希望div的行为类似于常规输入字段，但我不想使用实际的Input元素。

我在Stackblitz demo中给出了该问题的有效示例。

组件代码如下。

元素组件的模板HTML：

<div contentEditable='true' (input)="update($event)">{{value}}</div>
<p>{{value}}</p>

组件元素的打字稿文件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'element',
  template: `<div contentEditable='true' (input)="update($event)">{{value}}</div>
    <p>{{value}}</p>
`,
  styleUrls: ['./element.component.css']
})
export class ElementComponent {
  @Input() value: string;

  update(event) {
    this.value = event.target.innerText;
  }
}

CSS：

div{
  background: black;
  margin: auto;
  color:white;
  font-size: 2em;
}

三种不同的行为是：

如果未将初始值设置为值输入字段，在div中输入文字，文字会连续不断地附加到自身上。
如果您在键入时向值输入字段提供初始值在div中，光标会将其重置为初始位置。
是提供初始文本还是在空div中键入内容，如果您从div中选择了所有文本，然后按Delete或Backspace键并开始输入。它的行为就像一个普通的文本框。

我期望第3种行为，例如在您清除元素的行为方式之后。

Answer 1

可能的解释：您尚未声明绑定值。

解决方法：添加：

[textContent]="model"声明模板div

时

  model;
  ngOnInit(){
    this.model = this.value;
  }

在ElementComponent出口舱内

Stackblitz Demo

相关： How to use [(ngModel)] on div's contenteditable in angular2?， https://github.com/KostyaTretyak/ng-stack/tree/master/projects/contenteditable

尝试以可编辑div中的角度更新文本内容中的变量时，可编辑div上出现奇怪行为。有什么解释吗？

1 个答案: