Angular Material Chips与普通文本输入融合：类富文本编辑器式输入

我懂你想要的效果——官方Angular Material的chip输入组件确实只能在输入框的首尾添加chips，没法实现像富文本编辑器那样，把chips和普通文字随意混排的效果。要搞定这个需求，得跳出官方组件的局限，我给你几个实用的方案：

这是最灵活的实现方式，核心思路是用一个支持富编辑的容器（比如contenteditable的div），监听输入、光标位置变化等事件，手动控制文本和chips的插入位置，同时维护一个数据源来统一管理所有内容块。

• 核心步骤：
  1. 创建一个contenteditable="true"的div容器，作为文本和chips的承载容器
  2. 维护一个数组contentItems，每个元素结构为{ type: 'text' | 'chip', value: any }，用来记录所有内容片段（文本段或chip数据）
  3. 监听容器的input、keydown、click等事件，处理光标定位、内容拆分与合并：比如用户输入特定触发词（如@）选择联系人后，在当前光标位置插入chip，同时将光标前后的文本拆分为独立的文本项
  4. 每次contentItems更新时，重新渲染容器内的内容（文本节点+Material chip组件）
• 注意事项：
  • 要重点处理光标定位问题，尤其是插入/删除chip后，需要将光标自动定位到合适位置
  • 需屏蔽contenteditable的一些默认干扰行为（比如自动换行、带格式粘贴），可以通过事件阻止和内容格式化来处理
  • Angular中操作DOM尽量使用Renderer2，避免直接操作原生DOM

如果想让组件更稳定、更符合Angular的最佳实践，可以结合Angular CDK的工具类来优化：

• 核心思路：
  • 用CDK的Portal和PortalOutlet来动态插入chip组件，比直接创建DOM元素更优雅
  • 利用CDK的TextSelection工具类处理光标位置和文本范围，比原生API更可靠、更易维护
  • 把每个文本段和chip都封装成独立的可操作单元，方便处理选中、删除、移动等交互

如果不想从零开始造轮子，可以选择支持自定义组件插入的富文本编辑器（比如Quill、TinyMCE），把Angular Material的chip封装成编辑器的自定义插件，快速实现混排效果：

• 举个Quill编辑器的简单示例：
  1. 自定义一个Quill Blot类型，用来渲染Material chip组件
  2. 将自定义Blot注册到Quill编辑器中
  3. 添加触发按钮或快捷键，打开chip选择弹窗，选中后在光标位置插入自定义Blot
  4. 为chip添加删除、编辑等交互逻辑

import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';

@Component({
  template: `
    <div 
      #editableContainer 
      contenteditable="true" 
      class="editable-container" 
      (input)="syncContent()"
      (keydown.enter)="insertSampleChip($event)"
    ></div>
  `,
  styles: [`
    .editable-container {
      border: 1px solid #e0e0e0;
      padding: 8px;
      min-height: 120px;
      border-radius: 4px;
      font-size: 14px;
    }
    .mat-chip {
      display: inline-block;
      margin: 2px 4px 2px 0;
      cursor: default;
    }
  `]
})
export class ChipRichTextComponent {
  @ViewChild('editableContainer') editableContainer!: ElementRef<HTMLElement>;
  contentItems: Array<{ type: 'text' | 'chip', value: string }> = [];

  constructor(private renderer: Renderer2) {}

  syncContent() {
    // 这里可以实现容器内容到contentItems的同步逻辑，处理文本和chip的拆分与合并
    // 示例中简化处理，实际项目需要完善
  }

  insertSampleChip(event: KeyboardEvent) {
    event.preventDefault();
    const container = this.editableContainer.nativeElement;
    const selection = window.getSelection();
    
    if (!selection || selection.rangeCount === 0) return;
    const range = selection.getRangeAt(0);

    // 创建Material Chip元素
    const chip = this.renderer.createElement('span');
    this.renderer.addClass(chip, 'mat-chip');
    this.renderer.addClass(chip, 'mat-standard-chip');
    this.renderer.setProperty(chip, 'contenteditable', 'false');
    this.renderer.appendChild(chip, this.renderer.createText('示例联系人'));

    // 在光标位置插入Chip
    range.insertNode(chip);
    // 将光标移动到Chip后方
    range.setStartAfter(chip);
    range.setEndAfter(chip);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

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