【亲测免费】探索数学之美：formula-editor 公式编辑器

2026-01-14 18:44:10作者：苗圣禹Peter

项目介绍

formula-editor 是一款基于百度 kityformula-editor 开发的公式编辑器，支持 Android 和 Web 两种模式。无论你是需要在移动端还是桌面端进行数学公式的编辑，formula-editor 都能为你提供便捷、高效的解决方案。通过简单的配置和使用，你可以轻松生成 LaTeX 公式，并将其导出为 base64 图片，方便在各种场景中使用。

项目技术分析

formula-editor 的核心技术栈包括：

前端框架：基于 HTML、CSS 和 JavaScript 构建，支持现代浏览器。
构建工具：使用 npm 进行依赖管理，grunt 进行项目构建。
通信方式：支持 webview、iframe 和 documentEvent 三种通信方式，灵活应对不同场景的需求。
LaTeX 支持：通过键盘输入字符，实时生成 LaTeX 公式，并支持导出为 base64 图片。

项目及技术应用场景

formula-editor 适用于多种应用场景：

教育领域：教师和学生在编写数学作业、试卷或学术论文时，可以快速生成和编辑复杂的数学公式。
科研领域：科研人员在撰写论文或进行数据分析时，可以方便地插入和编辑公式。
工程领域：工程师在编写技术文档或进行设计时，可以高效地处理数学公式。
移动应用：Android 开发者可以在移动应用中集成公式编辑功能，提升用户体验。

项目特点

跨平台支持：支持 Android 和 Web 两种模式，满足不同平台的需求。
灵活的通信方式：支持 webview、iframe 和 documentEvent 三种通信方式，适应不同的集成需求。
实时 LaTeX 生成：通过键盘输入字符，实时生成 LaTeX 公式，并支持导出为 base64 图片。
自定义样式：支持设备类型、协议类型和设备宽度的自定义配置，满足不同设备的显示需求。

如何开始

安装依赖：
```
npm install
npm install -g anywhere
```
构建项目：
```
grunt build
anywhere -p {port}
```
运行项目：以 Web 模式为例，通过以下 URL 启动项目：
```
{ip地址}:{port}?device=pc&protocol=documentEvent
```

获取公式：通过以下代码获取生成的 LaTeX 公式和 base64 图片：

document.addEventListener('documentMessage', (e) => {
  const { type } = e?.detail;
  const msg = e?.detail?.data?.body;
  if (type !== 'common.setFormula') return;
  console.log('msg', msg.formula, msg.formulaSrc); // msg 123 data:image/png;......
});