基于mathlive从零将公式编辑器集成到可视化搭建平台

具体需求如下:

对于高等数学类课程的试卷,能不能实现编辑数学公式的功能呢?

经过了一系列的调研和可行性分析,我觉得这个需求非常有价值,而且应用面很广,技术上从web的角度也是可以实现的,所以我花了一点时间实现了它.

在文章末尾我也会把集成了数学公式的可视化编辑器地址分享给大家,供大学学习参考.

接下里我会和大家分享一下如何从零实现一个支持数学公式编辑器的组件,并集成到vue3项目中,如果大家对可视化搭建表单/试卷感兴趣,也可以参考我上一篇文章:

首先要想实现展示我们熟知的数学公式,在web里我们需要了解以下几种表示法:

latex

mathml

ascimath

以上三种表示法实际上都是标记语言,通过特定的语法格式来优雅的展示数学公式,简单举例如下:

如果大家熟悉这些标记语言,我们就可以很容易的使用前端开源库MathJax来编写数学公式.

具体使用如下:

templatedivclass="Formula"pid="math"/ppref="math"v-html=“str”/p/div/templatescriptexportdefault{name:'Formula',data(){return{str:''}},mounted(){this.$nextTick(()={//typesetPromise需要[]包裹='\\[x={-b\\pm\\sqrt{b^2-4ac}\\over2a}.\\]'([this.$]).catch(err=err)//tex2chtml不需要[]包裹conststr=`x={-b\\pm\\sqrt{b^2-4ac}\\over2a}`('#math').appChild((str))})}}/script

但是作为极具产品观念的我来说,让用户学习这些标记语言是非常痛苦的,所以我们要想一种更简单的方式,让用户不用学习,也能可视化的编写复杂数学公式.

我研究了一些成熟的库之后发现,有一个开源库非常适合我的“简单化”诉求,它就是——mathlive.

MathLive是一个功能强大的Web组件，它提供了一个易于使用的界面来编辑数学公式。

但是网上它的文档和在vue3中的使用非常稀少,可以说是完全没有.因为我做的橙子试卷搭建平台采用vue3来实现的,所以我需要研究一种支持vue3的方案.

好在我找到了它们纯英文版的文档,咬了一遍它的文档之后,对MathLive有了更深的理解.

文档里提供了原生webcomponent的使用方法和react的使用案例,好在我有5年多的react驾龄,看起来还是非常顺手的.下面我就直接分享如何把它集成到vue3项目里.感兴趣的朋友可以直接拿来应用到自己的项目里.

我们可以用npm或者yarn或者pnpm(推荐)安装:

pnpminstallmathlive

接下来我们来注册一下组件:

import*asMathLivefrom'mathlive';importVueMathfieldfrom'@/assets/';(VueMathfield,MathLive);

这样我们就可以在全局使用mathlive公式编辑器组件了.

为了实现上图的效果,我们需要在页面里定义组件:

mathlive-mathfield:options="{smartFence:false}"@input="handleChange":value="content"{{content}}/mathlive-mathfield

这个是mathlive默认是引入标签,当然我们可以修改它的定义,如果你是react选手,也可以直接这么使用:

//{namespaceJSX{interfaceIntrinsicElements{'math-field':,MathfieldElement;}}}//"./";import"///mathlive";import{useState}from"react";functionApp(){const[value,setValue]=useStatestring("");return(divclassName="App"math-fieldonInput={(evt:)=setValue()}{value}/math-fieldpValue:{value}/p/div);}exportdefaultApp;

接下来就来学习一下它的属性,下面是vue版的props,非常重要,大家可以收藏一下:

这里我整理了几个常用的api:

value组件绑定的值

input输入内容时的监听函数,用来更新和获取value

options组件选项属性,比如编辑模式,可读性等,非常重要

当然如果你想修改它的显示样式,可以通过操作dom或属性,也可以直接用css覆盖:

.content{:deep(math-field){width:100%;}}

通过以上步骤,基本上能实现我们上面分享的公式编辑器了:

接下来分享一下如何集成到我们的橙子试卷零代码搭建平台中.

首先我们需要先在物料库中添加数学公式编辑器组件,具体思路如下:

UI代码:

templatedivdivclass="title":style="{color:[index].titleColor}"mathlive-mathfield:options="{smartFence:false,readOnly:true,}"{{[index].titleText}}/mathlive-mathfield/diva-radio-group:direction="[index].direction"v-model="[index].value"a-radiov-for="[index].options":value="":key="":style="{'--radio-options-color':[index].optionsColor}"@{{}}.{{}}/a-radio/a-radio-groupMessage:value="[index].value":answer="[index].answer":auto="[index].auto":analysis="[index].analysis"//div/template

接下来我们来编写组件配置层代码,具体效果如下:

当我们编辑标题时,会打开公式编辑器:

这部分我们是通过配置DSL自动生成的属性面板,这块的知识我在分享H5-Dooring零代码实现原理时有具体的介绍,这里就不一一分析了,直接上代码:

exportdefaultclassMath{component:any;constructor(id:string,arr=[{label:'A',value:'苹果'},{label:'B',value:'香蕉'}]){={component:'math',type:'',id,check:true,titleText:'数学题目',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:'',field:'titleText',component:'math'},{name:'',field:'titleColor',component:'color',props:{type:'color'}},{name:'',field:'options',component:'options',props:{options:arr}},{name:'',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:'',field:'direction',component:"select",props:{options:[{label:'',value:'horizontal'},{label:'',value:'vertical'}],}},{name:'',field:'optionsColor',component:'color',props:{type:'color'}},{name:'',field:'answer',component:'select-lable',},{name:'',field:'analysis',component:'textarea'},{name:'',field:'auto',component:'switch'},{name:'',field:'scores',component:'numberInput',props:{min:0}},{name:'',field:'required',component:'switch'},{name:'',field:'margin',component:"padding",props:{min:0,type:'margin'}},]}}}

这样我们就能把编辑器组件成功变成一个零代码可消费的组件,当然这离不开我实现的零代码渲染引擎,这块我会在后面的文章中详细分享.

以上我们就实现了橙子试卷可视化搭建系统的数学公式编辑器功能,

体验地址:

后面我们会持续迭代可视化搭建产品如:

H5-Dooring零代码应用搭建平台

橙子试卷可视化试卷搭建平台

可视化大屏搭建平台