我想在ckeditor中使用wiris mattype。在这种情况下，数学类型符号在 ckeditor 工具栏中可见。但是当我尝试使用模态在编辑器中输入公式时，我输入的公式不会进入编辑器并给出错误消息，如图所示 我有以下代码：
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": "[email protected]: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"
}
}
如何修复此错误？
我尝试过拉取彼此匹配的 ckeditor 和 mathtype 版本。但还是出现同样的错误
该错误是由于
@ckeditor/ckeditor5-reactckeditor5@wiris/mathtype-ckeditor5检查版本
如果没有，请将
ckeditor542.0.0npm install ckeditor5@42 @ckeditor/ckeditor5-react@9
验证插件配置
确保
MathTypeChemTypepluginstoolbar.items调试错误
检查浏览器控制台可能源于初始化问题。
Wiris 服务可用性
如果使用自托管设置，请确保正确配置 Wiris 端点。
如果这些都不起作用，我建议尝试一个新的软件包，这里有几个