函数公式编辑教程开源（CKEditor集成MathType网页中写数学）

拿什麽賭 2023-03-28 12:40:43

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

本文讲的是在CKEditor5富文本编辑器中集成MathType，开启在线公式编辑功能，重点是：用户使用时无需下载安装插件、跨平台、支持‬手写‬。
先看效果
集成MathTpye前后的CKEditor功能对比，如下两图所示：

ckeditor5默认的编辑器

ckeditor5集成MathType之后的编辑器

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

点击数学公式按钮后弹开的公式编辑面板
‬CKEditor简介
网址https://ckeditor.com/

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

‬MathType简介
网址https://www.wiris.com/

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

‬重点来了：CKEditor5如何集成MathType
克隆CKEditor5源代码：

git clone -b stable https://github.com/ckeditor/ckeditor5

进入到源代码目录：

cd ckeditor5/packages/ckeditor5-build-classic

安装依赖：

npm install npm install @ckeditor/ckeditor5-alignment npm 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 https://ckeditor.com/legal/ckeditor-oss-license */ // 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服务器中，浏览器中访问http://localhost/ck_math.html，就可以看到ckeditor编辑器中多了两个图标，如下图所示。

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

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

【本文结束】

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

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