# formula

**Repository Path**: wenjiewu_cc/formula

## Basic Information

- **Project Name**: formula
- **Description**: 使用富文本框集成的一个公式输入插件，后台公式保存为latex
- **Primary Language**: TypeScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2026-07-29
- **Last Updated**: 2026-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 数理化公式富文本编辑器

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.x-4FC08D?logo=vue.js" alt="Vue 3" />
  <img src="https://img.shields.io/badge/Vite-6.x-646CFF?logo=vite" alt="Vite" />
  <img src="https://img.shields.io/badge/KaTeX-0.18-334455" alt="KaTeX" />
  <img src="https://img.shields.io/badge/国产化-自主可控-ED1C24" alt="国产化" />
  <img src="https://img.shields.io/badge/License-MIT-green" alt="License" />
</p>

> 📐⚛️🧪 一站式数学 + 物理 + 化学公式富文本编辑器，基于 Vue 3 + KaTeX 构建，完全离线可用。

---

## 📖 简介

还在为论文、教案、笔记里的公式排版头疼？本编辑器让你**所见即所得**地插入和编辑公式，覆盖**数学、物理、化学**三大理科场景。无需联网，打开浏览器就能用。

### ✨ 亮点功能

- 🔢 **数学公式** — 代数、微积分、极限、积分、矩阵与行列式，支持自定义矩阵/阵列/分段函数生成
- ⚛️ **物理公式** — 涵盖经典力学、电磁学、热力学、量子力学等常用表达式
- 🧪 **化学公式** — 化学方程式、化学式，更有独家的**环状结构拼接器**（六元环、五元环、杂环、稠环，自由配置取代基）
- 👁️ **实时预览** — 输入 LaTeX 即刻渲染，所见即所得
- 📦 **完全离线** — KaTeX 本地打包，无需任何 CDN，无网络照样跑
- ✏️ **富文本集成** — 公式以渲染后的 HTML/SVG 嵌入 contenteditable 编辑器，与文字完美混排
- 🛡️ **自主可控 · 国产化适配** — 核心依赖均为开源方案，架构灵活可扩展，全面支持国产化部署

---

## 🎬 演示

### 截图预览

![公式编辑器](screenshots/d0bf5e6d-ecbb-4f1a-8579-843e09ceee88.png)

![编辑效果](screenshots/98aff8b8-e36f-456e-9ef7-efa1aa214b67.png)

### 操作演示

![操作演示](screenshots/demo.gif)

---

## 🛠️ 技术栈

| 技术 | 用途 |
|------|------|
| [Vue 3](https://vuejs.org/) | 响应式 UI 框架 |
| [Vite](https://vitejs.dev/) | 极速构建工具 |
| [KaTeX](https://katex.org/) | LaTeX 渲染引擎 |
| [mhchem](https://mhchem.github.io/MathJax-mhchem/) | 化学式扩展 |

---

## 🚀 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

构建产物在 `dist/` 目录，可直接部署到任意静态服务器使用。

---

## 📂 项目结构

```
src/
├── components/
│   ├── AppToolbar.vue       # 工具栏
│   ├── FormulaModal.vue     # 公式编辑器弹窗
│   ├── PreviewPanel.vue     # LaTeX 输入 + 实时预览
│   └── TemplateGrid.vue     # 公式模板网格 + 环拼接器 + 矩阵生成器
├── utils/
│   └── formulas.js          # 数学/物理/化学公式模板库
├── App.vue                  # 主应用（富文本编辑器）
├── main.js                  # 入口
└── style.css                # 全局样式
```