Angular 12中如何在Summernote编辑器光标位置插入文本

问题分析 #

你遇到的Cannot read properties of undefined错误，本质是编辑器还未完成初始化就尝试访问其内部对象，且直接调用私有属性_editor并非官方推荐的稳定用法。ngx-summernote封装了原生Summernote的API，正确的做法是利用组件暴露的事件和官方API来实现需求。

解决方案步骤 #

1. 绑定编辑器初始化事件

在HTML模板中添加onInit事件监听，确保编辑器完全初始化后再执行操作：

<div [ngxSummernote]="config" (onInit)="onSummernoteInit($event)"></div>
<button (click)="addText()">插入Heeello</button>

2. 修正Component代码

移除对私有属性_editor的直接访问，通过初始化事件获取编辑器实例，或利用ViewChild结合官方API调用：

import { Component, ViewChild } from '@angular/core';
import { NgxSummernoteDirective } from 'ngx-summernote';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(NgxSummernoteDirective) ngxSummernote!: NgxSummernoteDirective;
  // 可选：保存编辑器实例，方便后续调用
  private summernoteInstance: any;

  config = {
    placeholder: '',
    tabsize: 2,
    height: '200px',
    uploadImagePath: '/api/upload',
    toolbar: [
      ['misc', ['codeview', 'undo', 'redo']],
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
      ['fontsize', ['fontname', 'fontsize', 'color']],
      ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
      ['insert', ['table', 'picture', 'link', 'video', 'hr']]
    ],
    fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']
  };

  onSummernoteInit(event: any) {
    // 保存初始化完成的编辑器实例
    this.summernoteInstance = event;
  }

  addText() {
    // 方法1：通过保存的实例调用insertText
    if (this.summernoteInstance) {
      this.summernoteInstance.insertText('Heeello');
    }

    // 方法2：直接通过ViewChild的nativeElement调用Summernote API（无需保存实例）
    // if (this.ngxSummernote) {
    //   (this.ngxSummernote.nativeElement as any).summernote('insertText', 'Heeello');
    // }
  }
}

关键说明 #

• insertText方法：Summernote原生API的insertText会自动在当前光标位置插入文本，无需手动获取光标位置，直接调用即可。
• 初始化时机：必须等待onInit事件触发后再操作编辑器，避免因未初始化导致的undefined错误。
• 避免私有属性：不要直接访问_editor这类私有属性，版本更新可能导致属性名变化，使用官方暴露的事件和API更稳定。

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