我手搓了一个 MathType 7公式输入键盘Web版MathType 7 web版本，同时结合 MathLive、La

最近在做一个 Web 端公式输入相关的小项目，过程中有个感受特别明显：

如果只是给开发者用，LaTeX 输入当然够了；
但如果是给老师、教研、题库录入人员、运营同学这类非程序员用户用，单纯靠手敲 LaTeX，体验其实并不友好。

所以我想做一个更接近 MathType 7 使用习惯的 Web 公式输入 demo。这是原版mathtype7键盘:

目前这个 demo 已经把基础交互链路跑通了，做成了一个 Vue 3 组件化的版本。这是我做的键盘:

这个键盘基本上还原了原版全部的公式，核心的映射json文件中有490个公式配置，可以输出公式对应的latex语法字符串或者mathlive字符串。

先看下这个 demo 主要做了什么

这个项目目前主要实现了下面几块：

简单来说，就是把“公式编辑器”和“公式键盘”两部分拆开来做，再把它们组合起来。

项目里几个核心部分也比较清晰：

核心原因还是“熟悉”。

很多教育类、题库类、公式录入类场景里的用户，对 MathType 的认知成本最低。
如果 Web 端组件在交互层面尽量贴近 MathType 7，用户上手速度会快很多。

尤其是在这些场景里会更明显：

相比“给一个输入框让用户自己写 LaTeX”，公式键盘这种交互方式对真实业务用户更友好。

整体技术栈比较简单：

MathLive 提供了 math-field，很适合做 Web 端公式输入框。
我这里把它单独封装成了一个 MathTypeEditor 组件，处理这些事情：

这样键盘层只负责“发出要插入什么”，编辑器层只负责“怎么插进去”。

键盘上的每一个符号、模板，本质上都是一段 LaTeX。
如果直接显示原始字符串，用户点选体验会很差；用 KaTeX 渲染后，按钮会直观很多。

这部分我单独做成了 MathTypeLatexButton，负责把 LaTeX 转成可点击的公式按钮。

这个项目里比较重要的一点，是把键盘结构做成了数据驱动：

都在 core/data.ts 里集中维护。

这样做的好处是，后续如果要继续补齐符号、扩展模板、定制某个业务版本，维护成本会低很多，不需要把逻辑和 UI 写死在组件里。

键盘层本身不关心底层编辑器是谁，它只负责输出两类结果：

这样设计之后，后面无论是继续增强 MathLive 集成，还是换成别的编辑器思路，都会更灵活一些。

这个 demo 虽然现在还是一个基础版，但方向是比较明确的。
我觉得它比较适合下面这类场景：

如果你也在做 Web 端公式输入、在线教育、题库录入、公式编辑器这类需求，欢迎交流。

如果大家对这个方向感兴趣，后面我也可以继续分享这个项目里几个更具体的点，比如：