Ionic中阻止contenteditable按Enter生成div的方法

我来帮你搞定这个Angular里的contenteditable回车行为问题！之前用jQuery在ngOnInit里没生效，大概率是因为Angular的DOM渲染时机问题，或者jQuery的事件绑定没有正确关联到元素上。咱们换用Angular原生的事件绑定方式，更靠谱也更符合框架的使用习惯：

方案一：替换回车行为为插入<br>标签 #

第一步：修改模板中的contenteditable元素 #

在home.html里给可编辑的<p>标签添加回车事件绑定：

<div class="context_menu">
  <p contenteditable="true" (keydown.enter)="handleEnter($event)">second section</p>
</div>

第二步：在组件中实现事件处理方法 #

打开home.ts，添加handleEnter方法来阻止默认行为并插入<br>：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.html',
  styleUrls: ['./home.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    // 这里不需要再写jQuery代码啦
  }

  handleEnter(event: KeyboardEvent): void {
    // 先阻止浏览器默认的生成div行为
    event.preventDefault();

    // 获取当前编辑的元素和光标位置
    const editableEl = event.target as HTMLElement;
    const selection = window.getSelection();
    
    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      // 创建br标签
      const br = document.createElement('br');
      
      // 清空光标选中的内容（如果有的话），插入br
      range.deleteContents();
      range.insertNode(br);
      
      // 把光标移动到br标签后面，保证继续输入的位置正确
      range.setStartAfter(br);
      range.collapse(true);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
}

方案二：直接阻止回车生成新元素 #

如果只需要禁止回车时自动生成div，不需要插入<br>，那把handleEnter方法简化成这样就行：

handleEnter(event: KeyboardEvent): void {
  event.preventDefault();
}

为什么之前的jQuery方案没生效？ #

Angular的ngOnInit钩子执行时，组件的DOM可能还没有完全渲染到页面上，这时候用jQuery去绑定事件，可能找不到对应的元素。而且Angular有自己的变更检测机制，直接混用jQuery容易出现事件绑定失效的问题，所以优先用Angular原生的事件绑定方式哦。

内容的提问来源于stack exchange，提问作者user2828442