基于Mathlive將數(shù)學公式編輯器集成到可視化搭建平臺
hi, 大家好, 我是徐小夕. 上篇文章和大家分享了剛開發(fā)完的可視化搭建產(chǎn)品——橙子試卷. 收到了很多用戶的反饋和建議, 其中有一個建議我覺得非常有意思, 所以花了一天時間研究和實現(xiàn)了這個用戶需求。
具體需求如下:
對于高等數(shù)學類課程的試卷, 能不能實現(xiàn)編輯數(shù)學公式的功能呢?
經(jīng)過了一系列的調(diào)研和可行性分析, 我覺得這個需求非常有價值, 而且應(yīng)用面很廣, 技術(shù)上從 web 的角度也是可以實現(xiàn)的, 所以我花了一點時間實現(xiàn)了它。
在文章末尾我也會把集成了數(shù)學公式的可視化編輯器地址分享給大家, 供大學學習參考。
接下里我會和大家分享一下如何從零實現(xiàn)一個支持數(shù)學公式編輯器的組件, 并集成到 vue3 項目中。
數(shù)學公式編輯器的技術(shù)實現(xiàn)
首先要想實現(xiàn)展示我們熟知的數(shù)學公式, 在 web 里我們需要了解以下幾種表示法:
- latex
- mathml
- ascimath
以上三種表示法實際上都是標記語言, 通過特定的語法格式來優(yōu)雅的展示數(shù)學公式, 簡單舉例如下:
如果大家熟悉這些標記語言, 我們就可以很容易的使用前端開源庫 MathJax 來編寫數(shù)學公式。
具體使用如下:
<template>
<div class="Formula">
<p id="math"></p>
<p ref="math" v-html=“str”></p>
</div>
</template>
<script>
export default {
name: 'Formula',
data() {
return {
str: ''
}
},
mounted() {
this.$nextTick(() => {
// typesetPromise 需要 [] 包裹
this.str = '\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]'
window.MathJax.typesetPromise([this.$refs.math]).catch(err => err)
// tex2chtml 不需要 [] 包裹
const str = `x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}`
document
.querySelector('#math')
.appendChild(window.MathJax.tex2chtml(str))
})
}
}
</script>但是作為極具產(chǎn)品觀念的我來說, 讓用戶學習這些標記語言是非常痛苦的, 所以我們要想一種更簡單的方式, 讓用戶不用學習, 也能可視化的編寫復雜數(shù)學公式。
我研究了一些成熟的庫之后發(fā)現(xiàn), 有一個開源庫非常適合我的“簡單化”訴求, 它就是——mathlive。
MathLive 是一個功能強大的 Web 組件，它提供了一個易于使用的界面來編輯數(shù)學公式。
但是網(wǎng)上它的文檔和在 vue3 中的使用非常稀少, 可以說是完全沒有. 因為我做的橙子試卷搭建平臺采用 vue3 來實現(xiàn)的, 所以我需要研究一種支持 vue3 的方案。
好在我找到了它們純英文版的文檔, 咬了一遍它的文檔之后, 對 MathLive 有了更深的理解。
文檔里提供了原生 webcomponent 的使用方法 和 react的使用案例, 好在我有5年多的 react 駕齡, 看起來還是非常順手的. 下面我就直接分享如何把它集成到 vue3 項目里. 感興趣的朋友可以直接拿來應(yīng)用到自己的項目里。
1、安裝和引入MathLive組件
我們可以用 npm 或者 yarn 或者 pnpm(推薦) 安裝:
pnpm install mathlive接下來我們來注冊一下組件:
import * as MathLive from 'mathlive';
import VueMathfield from '@/assets/vue-mathlive.mjs';
app.use(VueMathfield, MathLive);這樣我們就可以在全局使用 mathlive 公式編輯器組件了。
2、在項目中使用
為了實現(xiàn)上圖的效果, 我們需要在頁面里定義組件:
<mathlive-mathfield
:options="{ smartFence: false }"
@input="handleChange"
:value="content"
>
{{ content }}
</mathlive-mathfield>這個是 mathlive 默認是引入標簽, 當然我們可以修改它的定義, 如果你是 react 選手, 也可以直接這么使用:
// d.ts
declare global {
namespace JSX {
interface IntrinsicElements {
'math-field': React.DetailedHTMLProps<React.HTMLAttributes<MathfieldElement>, MathfieldElement>;
}
}
}
// app.tsx
import "./App.css";
import "http://unpkg.com/mathlive";
import { useState } from "react";
function App() {
const [value, setValue] = useState<string>("");
return (
<div className="App">
<math-field
onInput={
(evt: React.ChangeEvent<HTMLElement>) =>
setValue(evt.target.value)
}
>
{value}
</math-field>
<p>Value: {value}</p>
</div>
);
}
export default App;接下來就來學習一下它的屬性, 下面是 vue 版的 props, 非常重要, 大家可以收藏一下:
這里我整理了幾個常用的api:
- value 組件綁定的值。
- input 輸入內(nèi)容時的監(jiān)聽函數(shù), 用來更新和獲取value。
- options 組件選項屬性, 比如編輯模式, 可讀性等, 非常重要。
當然如果你想修改它的顯示樣式, 可以通過操作 dom 或?qū)傩? 也可以直接用 css 覆蓋:
.content {
:deep(math-field) {
width: 100%;
}
}通過以上步驟, 基本上能實現(xiàn)我們上面分享的公式編輯器了:
快速集成到可視化搭建平臺
接下來分享一下如何集成到我們的橙子試卷零代碼搭建平臺中。
首先我們需要先在物料庫中添加數(shù)學公式編輯器組件, 具體思路如下:
UI代碼:
<template>
<div>
<div class="title" :style="{ color: editorStore.data[index].titleColor }">
<mathlive-mathfield
:options="{
smartFence: false,
readOnly: true,
}"
>
{{ editorStore.data[index].titleText }}
</mathlive-mathfield>
</div>
<a-radio-group
:direction="editorStore.data[index].direction"
v-model="editorStore.data[index].value"
>
<a-radio
v-for="item in editorStore.data[index].options"
:value="item.label"
:key="item.label"
:style="{ '--radio-options-color': editorStore.data[index].optionsColor }"
@click.stop
>
{{ item.label }} . {{ item.value }}</a-radio
>
</a-radio-group>
<Message
:value="editorStore.data[index].value"
:answer="editorStore.data[index].answer"
:auto="editorStore.data[index].auto"
:analysis="editorStore.data[index].analysis"
/>
</div>
</template>其中我們需要關(guān)注 mathlive-mathfield 的一個屬性: readonly, 它是讓我們把 latex 渲染成可視的數(shù)學公式的必備屬性, 否則我們只能在編輯模式下看到數(shù)學公式了。
接下來我們來編寫組件配置層代碼, 具體效果如下:
當我們編輯標題時, 會打開公式編輯器:
這部分我們是通過配置DSL自動生成的屬性面板, 這塊的知識我在分享H 5-Dooring 零代碼實現(xiàn)原理時有具體的介紹, 這里就不一一分析了, 直接上代碼:
export default class Math {
component: any;
constructor(id: string, arr=[{label:'A',value:'蘋果'},{label:'B',value:'香蕉'}]) {
this.component = {
component: 'math',
type: 'editor.math',
id,
check: true,
titleText: '數(shù)學題目',
titleColor: 'black',
options: arr,
symbol: 'A,B,C...',
direction: 'horizontal',
optionsColor:'black',
answer:undefined,
analysis: '',
auto: '',
value:undefined,
margin: [10, 10, 10, 10],
scores:0,
required:false,
attrbite: [
{
name: 'editor.titleText',
field: 'titleText',
component: 'math'
},
{
name: 'editor.titleColor',
field: 'titleColor',
component: 'color',
props: {
type: 'color'
}
},
{
name: 'editor.optionConfig',
field: 'options',
component: 'options',
props: {
options:arr
}
},
{
name: 'editor.optionSymbol',
field: 'symbol',
component: 'select',
props: {
options: [
{label:'A,B,C...',value:'A,B,C...'},
{label:'1,2,3...',value:'1,2,3...'},
{label:'a,b,c...',value:'a,b,c...'},
{label:'I,II,III...',value:'I,II,III...'}
],
}
},
{
name: 'editor.optionDirection',
field: 'direction',
component: "select",
props: {
options: [{ label:'editor.horizontal', value: 'horizontal' }, { label: 'editor.vertical', value: 'vertical' }],
}
},
{
name: 'editor.optionsColor',
field: 'optionsColor',
component: 'color',
props: {
type: 'color'
}
},
{
name: 'editor.answerSettings',
field: 'answer',
component: 'select-lable',
},
{
name: 'editor.answerillustrate',
field: 'analysis',
component: 'textarea'
},
{
name: 'editor.grading',
field: 'auto',
component: 'switch'
},
{
name: 'editor.scores',
field: 'scores',
component: 'numberInput',
props: {
min: 0
}
},
{
name: 'editor.required',
field: 'required',
component: 'switch'
},
{
name: 'editor.margin',
field: 'margin',
component: "padding",
props: {
min: 0,
type:'margin'
}
},
]
}
}
}這樣我們就能把編輯器組件成功變成一個零代碼可消費的組件, 當然這離不開我實現(xiàn)的零代碼渲染引擎, 這塊我會在后面的文章中詳細分享.
以上我們就實現(xiàn)了橙子試卷 可視化搭建系統(tǒng)的數(shù)學公式編輯器功能,
體驗地址: https://turntip.cn/formManager。
