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小時內與您取得聯系。

整合營銷服務商

CKEditor集成MathType，網頁中寫數學、