在Angular CKEditor中动态插入Span元素指南

npm install @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule以支持ngModel
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // 必须导入
    CKEditorModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, VERSION } from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major; // 示例变量
  public editor = ClassicEditor; // CKEditor实例
  public editorContent: string = `<span>Hello, world!</span>`; // 绑定到CKEditor的初始内容

  /**
   * 插入HTML内容到CKEditor
   * 通过修改ngModel绑定的变量来实现
   */
  insertSpanElement(): void {
    // 生成一个随机ID
    const randomId = Math.random().toString(36).substring(2, 15);
    const newSpan = `<span id="${randomId}" style="background-color: yellow;">动态插入的文本 (${randomId})</span>`;

    // 将新的HTML内容追加到现有内容中
    // 注意：这里是简单追加，实际应用中可能需要更复杂的插入逻辑
    this.editorContent += newSpan;

    // 如果需要在光标位置插入，可以考虑更高级的CKEditor API，
    // 但对于简单追加或替换，直接修改绑定变量是最简单的。
  }

  /**
   * CKEditor的ready事件回调，可以在编辑器初始化完成后进行一些操作
   * @param editorInstance CKEditor实例
   */
  onEditorReady(editorInstance: any): void {
    console.log('CKEditor is ready.', editorInstance);
    // 可以在这里访问编辑器实例，进行更高级的操作
  }
}

<p>在Angular 10+中使用CKEditor插入HTML元素:</p>
<ckeditor [editor]="editor" [(ngModel)]="editorContent" (ready)="onEditorReady($event)"></ckeditor>
<button (click)="insertSpanElement()">插入动态Span元素</button>

<h3>当前编辑器内容 (ngModel):</h3>
<pre>{{ editorContent }}</pre>

p {
  font-family: Lato;
}
ckeditor {
  display: block;
  margin-bottom: 20px;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}