Angular中CKEditor5与MathType：无需点击插入直接同步内容

1. 通过CKEditor5插件实例监听MathType输入 #

在Angular组件中，直接通过CKEditor5的插件实例获取MathType对象，监听其内容变更事件实现实时同步：

import { Component, ViewChild } from '@angular/core';
import { CKEditorComponent } from '@ckeditor/ckeditor5-angular';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import MathType from '@wiris/mathtype-ckeditor5';

@Component({
  selector: 'app-math-sync-editor',
  templateUrl: './math-sync-editor.component.html',
  styleUrls: ['./math-sync-editor.component.css']
})
export class MathSyncEditorComponent {
  public Editor = ClassicEditor;
  public editorConfig = {
    plugins: [MathType],
    toolbar: ['MathType']
  };

  @ViewChild(CKEditorComponent) ckEditor!: CKEditorComponent;
  private mathTypePlugin: any;

  ngAfterViewInit(): void {
    const editorInstance = this.ckEditor.editorInstance;
    if (!editorInstance) return;

    // 获取MathType插件实例
    this.mathTypePlugin = editorInstance.plugins.get('MathType');
    // 监听MathType编辑器内容变更事件
    this.mathTypePlugin.editor.on('change', () => {
      this.syncToCKEditor();
    });
  }

  private syncToCKEditor(): void {
    if (!this.mathTypePlugin || !this.ckEditor.editorInstance) return;

    // 获取MathType当前的LaTeX内容
    const latexContent = this.mathTypePlugin.getContent();
    if (!latexContent) return;

    const editor = this.ckEditor.editorInstance;
    editor.model.change(writer => {
      const insertPos = editor.model.document.selection.getFirstPosition();
      // 替换光标位置内容，若需保留原有内容可改为插入操作
      writer.insertText(latexContent, insertPos);
      // 若需插入MathType格式元素而非纯文本，使用以下代码：
      // const mathElement = writer.createElement('mathType', { latex: latexContent });
      // writer.insert(mathElement, insertPos);
    });
  }
}

2. DOM监听兜底方案 #

如果插件实例监听失效，可直接监听MathType的DOM元素变化：

ngAfterViewInit(): void {
  // 监听MathType输入框的输入事件（类名需匹配当前MathType版本）
  const mathInput = document.querySelector('.wrs_f');
  mathInput?.addEventListener('input', () => this.syncToCKEditor());

  // 监听预览区域的DOM变化，适配实时渲染场景
  const mathPreview = document.querySelector('.wrs_preview');
  if (mathPreview) {
    const observer = new MutationObserver(() => this.syncToCKEditor());
    observer.observe(mathPreview, { childList: true, subtree: true });
  }
}

private syncToCKEditor(): void {
  const editor = this.ckEditor.editorInstance;
  if (!editor) return;

  // 从MathType的LaTeX显示区域获取内容
  const latexElement = document.querySelector('.wrs_latex');
  const latexContent = latexElement?.textContent?.trim();
  if (!latexContent) return;

  editor.model.change(writer => {
    const insertPos = editor.model.document.selection.getFirstPosition();
    writer.insertText(latexContent, insertPos);
  });
}

3. 关键注意事项 #

• 确认MathType与CKEditor5版本兼容，避免API不匹配问题。
• DOM监听方式需注意类名随版本变化，需自行核对当前MathType的DOM结构。
• 可添加防抖处理（如setTimeout），避免频繁同步导致性能损耗。
• 若需保留MathType的渲染格式，需使用CKEditor5对应的元素插入逻辑，而非纯文本。

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