CKEditor集成MathType，网页中写数学、化学公式像Word一样优美

原创2022-02-15 15:47·歪嘴博士Talk

‬这个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。

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

举报
评论 0
    热门：