CKEditor集成MathType，网页中写数学、

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

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

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

如何正确书写化学方程式》教学设计

一、教材分析https://www.shimengyuan.com/nianji/856.html

本节课知识体系是前面所学的元素符号、化学式等知识的延伸和扩展，并与元素符号和化学式构成了九年级化学三个重要的化学用语。它在本单元是联系质量守恒和进行化学计算的“中介”，为化学方程式的计算打下了基础。而且化学方程式贯穿于整个中学化学的教材中，是学生学好化学的前提和保证，更是解决化学问题的重要工具。

二、教学目标

1．知识与技能https://www.renjiaoshe.com/jiaocai/119.html

了解书写化学方程式应遵守的原则；会用化学方程式正确表达一般的化学反应。

2．过程与方法

采用讲练结合的方法，调动学生的学习主动性；采用归纳总结的方法，对配平化学方程式的方法加以总结。

3．情感态度与价值观

结合化学方程式书写原则的教学，让学生形成实事求是的科学态度；克服书写上的随意性和盲目性，养成良好的习惯，不断培养全面思考问题的能力。

三、学生情况分析

化学方程式的书写，本来不是难于理解的知识和难以掌握的技能，但往往会成为初中学生学习化学的分化点。主要原因是起始于元素符号、化学式的书写。由于学生的元素和化合物方面的知识很少，而对元素符号、化学式的接触不多，对化学式的读写还不是很熟悉，所以对于化学方程式的书写的学习就会感到有困难。因此，在教学中要激发学生学好化学方程式的积极性；同时也利用多个活动，提高学生的学习兴趣。

四、教学重点

化学方程式的正确书写；化学方程式的配平。

五、教学难点

化学方程式的配平

六、教学方法

本节课主要采用学生的活动探究为主线，结合使用讲授式，讨论学习式的教学模式。同时，本节课在教学策略上侧重于合作式学习。

七、教学过程

ypora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本，目前完全免费。

https://typora.io/#

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

在使用Dreamweaver编写网页时，遇到需要插入代码块、流程图、数学公式时，总是显得很无力，效率很低，效果不好，使用Typora会让这些问题迎刃而解，且轻便，简单。

直接看一个demo：

导出为html:

html网页源代码：

其可以导出的格式有：

流程图样式包括：

1、标准流程图源码格式（横向）：

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

2 mermaid语言库绘流程图

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。
官网：https://mermaidjs.github.io/
Github 项目地址：https://github.com/knsv/mermaid

2.1 横向流程图源码格式：

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]

2.2 竖向流程图源码格式：

sequenceDiagram
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

2.3 时序图源码复杂样例

        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

2.4 甘特图样例：

        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

教程：

Markdown 高级技巧 | 菜鸟教程（使用 Typora 编辑器讲解 Markdown 的语法）

https://www.runoob.com/markdown/md-advance.html

ref

1 Typora 完全使用详解

https://sspai.com/post/54912/

2 用什么软件画流程图好？-悟空问答

https://www.wukong.com/question/6809962012198568195/

3 Mermaid 实用教程

https://blog.csdn.net/fenghuizhidao/article/details/79440583

－End－

在线咨询

上一篇：JavaScript封装 ajax GET和POST
下一篇：教你初步了解响应式网页设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。