contenteditable 不适用于 cdkDrag答案

【问题标题】：contenteditable is not working with cdkDragcontenteditable 不适用于 cdkDrag
【发布时间】：2020-07-11 13:35:54
【问题描述】：

我正在尝试使用一个 div 元素标签，并使其表现得像一个带有 css 的文本区域。

#textarea {
    -moz-appearance: textfield-multiline;   ------------ card.component.css
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="textarea" contenteditable>I look like a textarea</div>  ---- card.component.html

但我在我的卡上使用父组件（类别组件）的 cdkDrag

<div cdkDrag class="col-sm-12 px-2 pb-2">
  <app-card (cardEvent)="deleteCard($event)" [card]="card">

我发现此链接contenteditable not working properly with cdkDrag on google-chrome 解释相同，但无法得到任何答案。

【问题讨论】：

标签： contenteditable angular-cdk-drag-drop

【解决方案1】：

CDK 的DragRef 监听mousedown 事件，因此您可以将(mousedown)="$event.stopPropagation()" 处理程序添加到您的contenteditable div 以防止该事件冒泡到具有cdkDrag 指令的元素。

编辑：这是 CDK 中的调用站点DragRef 代码：https://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-ref.ts#L775

【讨论】：

【解决方案2】：

这个问题是由left click mouse events being absorbed 由CdkDrag 指令引起的。如果您使用选项卡导航到元素或右键单击它，则可以进行编辑以确认这一点。

一种可能的解决方案是将CdkDrag 指令的cdkDragDisabled 属性设置为true，例如

<div cdkDrag [cdkDragDisabled]="some condition" ...

编辑时间。

只需将相同的值添加到 [cdkDragDisabled] 和 [contentEditable] 即可。

【讨论】：

【解决方案3】：

<div class="custom-editable" contenteditable="true" #contentNotes (mousedown)="$event.stopPropagation()"></div>

它的工作和工作效果很好

【讨论】：