‬这个MathType就是我们日常在Office软件中使用的公式编辑器，大名鼎鼎。

本文讲的是在CKEditor5富文本编辑器中集成MathType，开启在线公式编辑功能，重点是：用户使用时无需下载安装插件、跨平台、支持‬手写‬。

先看效果

集成MathTpye前后的CKEditor功能对比，如下两图所示：

ckeditor5默认的编辑器

ckeditor5集成MathType之后的编辑器

点击上图的数学公式图标、化学公式图标，便会弹出如下图所示的公式编辑面板，还支持手写。

点击数学公式按钮后弹开的公式编辑面板

‬CKEditor简介

网址

CKEditor5是一个超现代的JavaScript富文本编辑器，具有MVC架构、自定义数据模型和虚拟DOM。它是在ES6中从头开始编写的，并且具有出色的webpack支持。它‬支持‬与Angular、React和Vue.js的原生集成。可以‬与Electron和移动设备（Android、iOS）兼容。

‬MathType简介

网址

MathType是一款功能强大的数学公式编辑器，已经被普遍应用于教育教学、科研机构、工程学等领域。在Office软件中使用的公式编辑器，就是这个大名鼎鼎的MathType，它‬的公司‬是Data Science。2017年被做在线公式编辑的WIRIS公司收购，两家强强合并发挥了各自在桌面端、在线端的优势。

‬重点来了：CKEditor5如何集成MathType

克隆CKEditor5源代码：

git clone -b stable 

进入到源代码目录：

cd ckeditor5/packages/ckeditor5-build-classic

安装依赖：

npm installnpm install @ckeditor/ckeditor5-alignmentnpm install @wiris/mathtype-ckeditor5

编辑源码src/ckeditor.js：

/** * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or  */// The editor creator to use.import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';import Heading from '@ckeditor/ckeditor5-heading/src/heading';import Image from '@ckeditor/ckeditor5-image/src/image';import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';import Indent from '@ckeditor/ckeditor5-indent/src/indent';import Link from '@ckeditor/ckeditor5-link/src/link';import List from '@ckeditor/ckeditor5-list/src/list';import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';import Table from '@ckeditor/ckeditor5-table/src/table';import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- 此行新增import MathType from '@wiris/mathtype-ckeditor5/src/plugin';    // <--- 此行新增export default class ClassicEditor extends ClassicEditorBase {}// Plugins to include in the build.ClassicEditor.builtinPlugins = [	Essentials,	UploadAdapter,	Autoformat,	Bold,	Italic,	BlockQuote,	CKFinder,	CloudServices,	EasyImage,	Heading,	Image,	ImageCaption,	ImageStyle,	ImageToolbar,	ImageUpload,	Indent,	Link,	List,	MediaEmbed,	Paragraph,	PasteFromOffice,	Table,	TableToolbar,	TextTransformation,	Alignment,                        // <--- 此行新增  MathType,                        // <---此行新增];// Editor configuration.ClassicEditor.defaultConfig = {	toolbar: {		items: [			'heading',			'|',                                  // <--- 此行新增      'MathType',                  // <--- 此行新增      'ChemType',                // <--- 此行新增      '|',      'alignment',                  // <--- 此行新增			'bold',			'italic',			'link',			'bulletedList',			'numberedList',			'|',			'outdent',			'indent',			'|',			'uploadImage',			'blockQuote',			'insertTable',			'mediaEmbed',			'undo',			'redo'		]	},	image: {		toolbar: [			'imageStyle:inline',			'imageStyle:block',			'imageStyle:side',			'|',			'toggleImageCaption',			'imageTextAlternative'		]	},	table: {		contentToolbar: [			'tableColumn',			'tableRow',			'mergeTableCells'		]	},	// This value must be kept in sync with the language defined in webpack.config.js.	language: 'zh-cn'       // <--- 此行修改为zh-cn};

将webpack.config.js的language改为zh-cn：

language: 'zh-cn'

在node_modules\@wiris\mathtype-html-integration-devkit\lang\strings.json文件中新增zh-cn节点：

"zh-cn": {        "latex": "LaTeX",        "cancel": "取消",        "accept": "插入",        "manual": "手册",        "insert_math": "插入数学公式 - MathType",        "insert_chem": "插入化学分子式 - ChemType",        "minimize": "最小化",        "maximize": "最大化",        "fullscreen": "全屏幕",        "exit_fullscreen": "退出全屏幕",        "close": "关闭",        "mathtype": "MathType",        "title_modalwindow": "MathType 模式窗口",        "close_modal_warning": "您确定要离开吗？您所做的修改将丢失。",        "latex_name_label": "Latex 分子式",        "browser_no_compatible": "您的浏览器不兼容 AJAX 技术。请使用最新版 Mozilla Firefox。",        "error_convert_accessibility": "将 MathML 转换为可访问文本时出错。",        "exception_cross_site": "仅 HTTP 允许跨站脚本。",        "exception_high_surrogate": "fixedCharCodeAt() 中的高位代理之后未跟随低位代理",        "exception_string_length": "无效字符串。长度必须是 4 的倍数",        "exception_key_nonobject": "非对象调用了 Object.keys",        "exception_null_or_undefined": " 该值为空或未定义",        "exception_not_function": " 不是一个函数",        "exception_invalid_date_format": "无效日期格式： ",        "exception_casting": "无法转换 ",        "exception_casting_to": " 为 "    },

重新构建ckeditor：

npm run build

重新构建的文件就会在当前目录的build目录下。

实验，以传统网页集成为例。

新建一个网页，例如ck_math.html：

<!DOCTYPE html><html lang="en"><head>    <title>Document</title>    <script src="build/ckeditor.js"></script></head><body>    <div id="editor">        <p>Here goes the initial content of the editor.</p>    </div><script>    ClassicEditor    .create( document.querySelector( '#editor' ) )    .then( editor => {        console.log( editor );    } )    .catch( error => {        console.error( error );    } );</script>    </body></html>

将刚才编译得到build文件夹和ck_math.html一起放在web服务器中，浏览器中访问，就可以看到ckeditor编辑器中多了两个图标，如下图所示。

点击数学公式图标，会在页面右下角弹出数学公式编辑面板，如下图所示。

点击化学公式图标，会在页面右下角弹出化学公式编辑面板，如下图所示。

【本文结束】

下篇‬预告‬：Vue3项目‬中‬如何使用‬今天‬我们‬‬集成‬了MathType‬的‬CKEditor。

学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。