如何使用angular-editor在光标所在位置插入下拉框选中值

核心思路 #

你原有实现的问题是直接手动拼接全量内容再赋值，无法识别编辑器当前光标位置，我们可以直接使用angular-editor内置的API实现指定位置插入内容。

具体修改步骤 #

• 第一步：给模板中的angular-editor组件添加模板引用标识

<angular-editor 
  #editor 
  [formControl]="productForm.controls.des" 
  [config]="yourEditorConfig"
></angular-editor>

• 第二步：组件内获取编辑器实例

import { ViewChild } from '@angular/core';
import { AngularEditorComponent } from '@kolkov/angular-editor';

// 你的组件类
export class YourComponent {
  // 获取编辑器实例引用
  @ViewChild('editor') editor!: AngularEditorComponent;
  // 原有其他变量保留
  selectedID = '';
  arrayfordynamic = '';
  // ...其他原有变量

• 第三步：修改下拉框选中事件逻辑

selectChangeHandler(event: any) {
  this.selectedID = event.target.value;
  // 构造要插入的内容，如果需要累加所有选中项保留+=，不需要就直接赋值
  const insertContent = `<div>{{DV.Product.${this.selectedID}}}</div>`;
  this.arrayfordynamic += insertContent;
  
  // 直接调用内置方法插入到当前光标位置，无需手动拼接全量内容setValue
  this.editor.editorService.insertHtml(insertContent);
}

异常兼容（可选） #

如果点击下拉框时会导致编辑器失焦、光标位置丢失，可以提前保存上次的有效选区，插入前恢复即可：

// 新增变量保存上次有效选区
lastSelection: Selection | null = null;

ngAfterViewInit() {
  // 监听编辑器选区变化，实时保存有效选区
  this.editor.editorService.selectionChange.subscribe(selection => {
    if (selection && selection.rangeCount > 0) {
      this.lastSelection = selection;
    }
  });
}

selectChangeHandler(event: any) {
  this.selectedID = event.target.value;
  const insertContent = `<div>{{DV.Product.${this.selectedID}}}</div>`;
  this.arrayfordynamic += insertContent;

  // 恢复上次保存的选区
  if (this.lastSelection && this.lastSelection.rangeCount > 0) {
    const range = this.lastSelection.getRangeAt(0);
    this.editor.editorService.setRange(range);
  }

  this.editor.editorService.insertHtml(insertContent);
}

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