CKEditor集成Wiris MathType插入公式失败报错修复求助

问题描述 #

在CKEditor 5中集成Wiris MathType后，工具栏能正常显示MathType图标，但打开模态框输入公式后无法插入到编辑器，同时控制台报错：

hook.js:608 Error tracking OPENED_MTCT_EDITOR TypeError: Cannot read properties of undefined (reading 'track')

已尝试匹配CKEditor与MathType版本，但问题仍未解决。

相关代码实现 #

import { CKEditor } from '@ckeditor/ckeditor5-react';
import {
    ClassicEditor,
    AccessibilityHelp,
    Autoformat,
    AutoImage,
    Autosave,
    Base64UploadAdapter,
    BlockQuote,
    Bold,
    Code,
    Essentials,
    FindAndReplace,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Heading,
    Highlight,
    ImageBlock,
    ImageCaption,
    ImageInline,
    ImageInsert,
    ImageInsertViaUrl,
    ImageResize,
    ImageStyle,
    ImageTextAlternative,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Italic,
    Link,
    LinkImage,
    List,
    ListProperties,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    RemoveFormat,
    SelectAll,
    SourceEditing,
    SpecialCharacters,
    SpecialCharactersArrows,
    SpecialCharactersCurrency,
    SpecialCharactersEssentials,
    SpecialCharactersLatin,
    SpecialCharactersMathematical,
    SpecialCharactersText,
    Strikethrough,
    Subscript,
    Superscript,
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar,
    TextTransformation,
    TodoList,
    Underline,
    Undo
} from 'ckeditor5';
import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';

import { baseURL } from '../api';
import './styles.scss';
import 'ckeditor5/ckeditor5.css';

function CKEDITOR(props) {
    return (
        <CKEditor
            editor={ClassicEditor}
            config={{
                toolbar: {
                    items: [
                        'undo',
                        'redo',
                        '|',
                        'sourceEditing',
                        'findAndReplace',
                        '|',
                        'subscript',
                        'superscript',
                        'heading',
                        '|',
                        'fontSize',
                        'fontFamily',
                        'fontColor',
                        'fontBackgroundColor',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        'code',
                        'removeFormat',
                        '|',
                        'specialCharacters',
                        'link',
                        'insertImage',
                        'mediaEmbed',
                        'insertTable',
                        'highlight',
                        'blockQuote',
                        '|',
                        'bulletedList',
                        'numberedList',
                        'todoList',
                        'outdent',
                        'indent',
                        'MathType', 'ChemType',
                    ],
                },
                plugins: [
                    AccessibilityHelp,
                    Autoformat,
                    AutoImage,
                    Autosave,
                    Base64UploadAdapter,
                    BlockQuote,
                    Bold,
                    Code,
                    Essentials,
                    FindAndReplace,
                    FontBackgroundColor,
                    FontColor,
                    FontFamily,
                    FontSize,
                    Heading,
                    Highlight,
                    ImageBlock,
                    ImageCaption,
                    ImageInline,
                    ImageInsert,
                    ImageInsertViaUrl,
                    ImageResize,
                    ImageStyle,
                    ImageTextAlternative,
                    ImageToolbar,
                    ImageUpload,
                    Indent,
                    IndentBlock,
                    Italic,
                    Link,
                    LinkImage,
                    List,
                    ListProperties,
                    MediaEmbed,
                    Paragraph,
                    PasteFromOffice,
                    RemoveFormat,
                    SelectAll,
                    SourceEditing,
                    SpecialCharacters,
                    SpecialCharactersArrows,
                    SpecialCharactersCurrency,
                    SpecialCharactersEssentials,
                    SpecialCharactersLatin,
                    SpecialCharactersMathematical,
                    SpecialCharactersText,
                    Strikethrough,
                    Subscript,
                    Superscript,
                    Table,
                    TableCaption,
                    TableCellProperties,
                    TableColumnResize,
                    TableProperties,
                    TableToolbar,
                    TextTransformation,
                    TodoList,
                    Underline,
                    Undo,
                    MathType,
                ],
                initialData: props.value,
                image: {
                    toolbar: [
                        'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|',
                        'toggleImageCaption', 'imageTextAlternative'
                    ]
                }
            }}
            onChange={(event, editor) => { props.onChange(editor.getData()); }}
        />
    );
}

export default CKEDITOR;

package.json 配置 #

{
  "name": "@coreui/coreui-free-react-admin-template",
  "version": "5.1.0",
  "description": "CoreUI Free React Admin Template",
  "homepage": ".",
  "bugs": {
    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
  },
  "license": "MIT",
  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
  "scripts": {
    "build": "vite build",
    "lint": "eslint \"src/**/*.js\"",
    "serve": "vite preview",
    "start": "vite"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-react": "^9.3.1",
    "@coreui/chartjs": "^4.0.0",
    "@coreui/coreui": "^5.0.2",
    "@coreui/icons": "^3.0.1",
    "@coreui/icons-react": "^2.2.1",
    "@coreui/react": "^5.1.0",
    "@coreui/react-chartjs": "^3.0.0",
    "@coreui/utils": "^2.0.2",
    "@popperjs/core": "^2.11.8",
    "@tinymce/tinymce-react": "^5.1.1",
    "@wiris/mathtype-ckeditor5": "^8.10.0",
    "chart.js": "^4.4.3",
    "chroma-js": "^3.1.1",
    "ckeditor5": "^43.2.0",
    "classnames": "^2.5.1",
    "core-js": "^3.37.1",
    "jquery": "^3.7.1",
    "katex": "^0.16.11",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-quill": "^2.0.0",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.23.1",
    "react-select": "^5.8.1",
    "react-toastify": "^10.0.5",
    "redux": "5.0.1",
    "simplebar-react": "^3.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.2",
    "eslint-plugin-react-hooks": "^4.6.2",
    "postcss": "^8.4.38",
    "prettier": "3.3.2",
    "sass": "^1.79.3",
    "vite": "^5.2.13"
  }
}

修复方案 #

1. 关闭Wiris错误追踪功能 #

报错核心是Wiris的追踪模块未正确初始化，直接在CKEditor配置中禁用追踪：
修改CKEditor的config对象，添加MathType专属配置：

config={{
  // 保留原有所有配置...
  MathType: {
    serviceProvider: {
      editorServices: {
        options: {
          tracker: false // 禁用错误追踪，解决track未定义问题
        }
      }
    }
  }
}}

2. 修正MathType导入路径 #

当前导入路径指定了dist/index.js，可能导致部分依赖模块未正确加载，改为官方推荐的导入方式：

// 替换原有导入
import MathType from '@wiris/mathtype-ckeditor5';

3. 清理并重新安装依赖 #

依赖缓存或版本冲突可能导致加载异常，执行以下步骤：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json文件
• 运行npm install重新安装所有依赖

4. 确认版本兼容性 #

当前使用的ckeditor5@43.2.0与@wiris/mathtype-ckeditor5@8.10.0是兼容的，若上述步骤无效，可尝试降级MathType版本至8.9.0，或升级CKEditor5至最新稳定版。

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