简介MathLive 是一个基于 LaTeX 语法的数学公式编辑器支持实时渲染和交互式编辑集成了 math-field、Compute Engine 和 MathJSON Format。可以点击MathLive文档地址查看详细API。本文主要介绍如何使用 math-field 来实现数学公式的编辑功能。1. 安装并引入mathlive可以使用npm或yarn命令安装npm install mathlive yarn add mathlive安装完成后引入、注册组件// 引入MathLive和mjs文件 import * as MathLive from mathlive; import VueMathfield from /assets/vue-mathlive.mjs; app.use(VueMathfield, MathLive)注意vue-mathlive.mjs 需要自己在项目文件夹中新建个文件内容如下/** MathLive 0.106.0 */ var l{name:mathlive-mathfield,template:math-field :ididslot/slot/math-field,props:{id:{type:String,default:},value:{type:String,default:}},install(e,t){e!nulle.versione.version.split(.)[0]3?e.config.globalProperties.$mathlivet:Object.defineProperty(e.prototype,$mathlive,{value:t}),e.component(mathlive-mathfield,this)},watch:{value(e){let tthis.$el.getValue();e!tthis.$el.setValue(e,{silenceNotifications:!0})}},mounted(){this.$nextTick((){})},methods:{executeCommand(e){this.$el.executeCommand(e)},hasFocus(){return this.$el.hasFocus()},focus(){this.$el.focus()},blur(){this.$el.blur()},getValue(e){return this.$el.getValue(e)},insert(e,t){this.$el.insert(e,t)},select(){this.$el.select()}}};export{l as default};2. 在项目中使用math-field idmf placeholdersome text/math-field引入这个组件就可以使用了效果如下3. 扩展使用LateX我们可以直接将公式解析成LateX语言以便实时查看template div div classmathfield math-field idmf placeholdersome text \displaylines{\Sigma_{n0}^{\infty}\frac{1}{2^{n}}2\\ x\frac{-b\pm\sqrt{b^2-4ac}}{2a}\\ } /math-field /div div classlatex-wrap labelLateX:/label textarea idlatex classlatex-area autocapitalizeoff autocompleteoff autocorrectoff spellcheckfalse /textarea /div /div /template script langts setup import { onMounted } from vue; onMounted(() { const mf document.getElementById(mf); const latex document.getElementById(latex); latex.value mf.value; mf?.addEventListener(input, (evt) { latex.value mf.value; }); latex.addEventListener(input, (ev) mf.setValue( ev.target.value, {silenceNotifications: true} ) ); }) /script4. 虚拟键盘的使用一些特殊符号机械键盘上没有所以就需要用到mathlive内置的虚拟键盘。默认带有虚拟键盘的图标点击即可打开键盘设置// 1.设置中文语言 MathfieldElement.strings可查看所有语言 console.log(MathfieldElement.strings) MathfieldElement.locale zh-cn; // 2.虚拟键盘设置 布局numeric-数字, symbols-符号, alphabetic-字母greek-希腊字母(minimalist-极简compact-紧凑) // mathVirtualKeyboard.layouts [minimalist]; //极简键盘 mathVirtualKeyboard.container document.querySelector(.pop-wrap); //设置虚拟键盘容器默认body // 虚拟键盘显示/隐藏方法mathVirtualKeyboard.show()显示 hide()隐藏 mf?.addEventListener(focus, () mathVirtualKeyboard.show()); //输入框聚焦显示虚拟键盘5. 编辑器插入内容点击菜单图标可插入矩阵、导数、积分等复杂公式也可将公式复制成不同的格式内容6. 样式设置mathfield 暴露了可用于设置其样式的 CSS 部件CSS parts。例如要隐藏菜单按钮可以这样操作math-field::part(menu-toggle) { display: none; }以上就实现了一个基本的数学公式编辑器更多的功能后面遇到了再写。代码仓库完整代码已上传至 https://gitee.com/z-beast/mathlive-vue3-demo