函數公式編輯教程開源（CKEditor集成MathType網頁中寫數學）

2023-10-13 19:41:04 2

‬這個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 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 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：

Document Here goes the initial content of the editor. ClassicEditor .create( document.querySelector( '#editor' ) ) .then( editor => { console.log( editor ); } ) .catch( error => { console.error( error ); } );

將剛才編譯得到build文件夾和ck_math.html一起放在web伺服器中，瀏覽器中訪問http://localhost/ck_math.html，就可以看到ckeditor編輯器中多了兩個圖標，如下圖所示。

點擊數學公式圖標，會在頁面右下角彈出數學公式編輯面板，如下圖所示。

點擊化學公式圖標，會在頁面右下角彈出化學公式編輯面板，如下圖所示。

【本文結束】

下篇‬預告‬：Vue3項目‬中‬如何使用‬今天‬我們‬‬集成‬了MathType‬的‬CKEditor。

學習過程記錄，有需要的朋友可以參考。歡迎一鍵三連（點讚、關注、評論）。

,