React MathJax Beautiful：专业的 React 数学公式编辑器

在现代 Web 应用中，数学公式编辑一直不是一个轻松的问题。你既要支持 LaTeX 语法，又要有实时预览、符号面板、公式模板，还要兼顾组件化、类型提示和交互体验。

如果你的项目是 React 技术栈，那么现在可以使用 React MathJax Beautiful。它是基于 React 和 MathJax 的数学公式编辑组件，专注于提供简洁、专业、可直接集成的公式编辑能力。

🌟 为什么选择 React MathJax Beautiful？

1. 专业的数学公式编辑能力

基于 MathJax 渲染引擎
支持常见 LaTeX 数学公式语法
实时预览公式效果
内置数学符号面板
支持常用公式模板
符号和公式示例均使用 MathJax SVG 渲染

2. 面向 React 的组件设计

基于 React 18+ 开发
支持 React 19
支持 TypeScript 类型声明
支持受控和非受控使用方式
支持弹窗模式和内联模式

3. 良好的使用体验

简洁的公式输入区域
实时预览区域
数学符号快速插入
常用公式模板快速选择
支持浅色和深色主题
支持中文和英文界面

4. 独立 npm 包

React 版本作为独立包发布：

复制代码

npm install react-mathjax-beautiful

样式也提供独立入口：

复制代码

import 'react-mathjax-beautiful/style.css'

🚀 特色功能

1. 弹窗模式

适合在表单、文章编辑器、题库系统中临时打开公式编辑器。

复制代码

import { useState } from 'react'
import { MathjaxBeautiful } from 'react-mathjax-beautiful'
import 'react-mathjax-beautiful/style.css'

export function FormulaDialog() {
  const [open, setOpen] = useState(false)
  const [formula, setFormula] = useState('E = mc^2')

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        编辑公式
      </button>

      <MathjaxBeautiful
        open={open}
        onOpenChange={setOpen}
        existingLatex={formula}
        onChange={setFormula}
        onInsert={setFormula}
      />
    </>
  )
}

2. 内联模式

适合固定展示在页面中的公式编辑区域。

复制代码

import { useState } from 'react'
import { MathjaxBeautiful } from 'react-mathjax-beautiful'
import 'react-mathjax-beautiful/style.css'

export function InlineFormulaEditor() {
  const [latex, setLatex] = useState('\frac{a}{b} + \sqrt{x}')

  return (
    <MathjaxBeautiful
      inline
      value={latex}
      onChange={setLatex}
      onInsert={(formula) => console.log(formula)}
    />
  )
}

3. 主题与语言切换

组件内置浅色/深色主题，并支持中英文界面。

复制代码

<MathjaxBeautiful
  inline
  theme="dark"
  locale="zh-CN"
  value={latex}
  onChange={setLatex}
/>

📦 快速开始

安装

复制代码

# npm
npm install react-mathjax-beautiful

# yarn
yarn add react-mathjax-beautiful

# pnpm
pnpm add react-mathjax-beautiful

基础使用

复制代码

import { useState } from 'react'
import { MathjaxBeautiful } from 'react-mathjax-beautiful'
import 'react-mathjax-beautiful/style.css'

export default function App() {
  const [latex, setLatex] = useState('x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}')

  return (
    <MathjaxBeautiful
      inline
      value={latex}
      onChange={setLatex}
      onInsert={(formula) => {
        console.log('插入公式：', formula)
      }}
    />
  )
}

⚙️ 常用配置

复制代码

<MathjaxBeautiful
  inline
  value={latex}
  onChange={setLatex}
  onInsert={handleInsert}
  theme="light"
  locale="zh-CN"
  showSymbols
  showPreview
  showThemeToggle
  showClearButton
  showLanguageToggle
  showFormulaExamples
  wrapFormula
  maxLength={1000}
  rows={3}
/>

常用属性说明：

inline：启用内联模式
open / onOpenChange：控制弹窗打开状态
value / onChange：受控 LaTeX 输入
defaultValue：非受控初始值
existingLatex：打开编辑器时填入已有公式
theme：light 或 dark
locale：zh-CN 或 en-US
showSymbols：是否显示符号面板
showPreview：是否显示实时预览
showFormulaExamples：是否显示常用公式模板
wrapFormula：插入时是否自动包装 $...$ 或 $$...$$

🎯 适用场景

1. 在线教育

数学教学平台
在线作业系统
试题编辑系统
答案解析编辑器

2. 科研与技术写作

论文辅助编辑
科研笔记
技术博客
Markdown 编辑器扩展

3. 内容创作平台

知识库系统
教程平台
公式密集型文章编辑
文档管理系统

4. 后台管理系统

题库管理
课程内容管理
学术内容录入
富文本公式插入前置编辑

🔍 和 Vue 版本的关系

如果你之前使用过 vue-mathjax-beautiful，React 版本可以理解为同一套公式编辑体验在 React 技术栈中的实现。

目前 React 包聚焦于 公式编辑组件 MVP：

提供 MathjaxBeautiful 公式组件
支持弹窗和内联模式
支持符号面板、实时预览、公式模板
支持 TypeScript
支持独立样式入口

需要注意的是：React 包当前不包含 Vue 包里的富文本编辑器 VueMathjaxEditor。如果你的目标只是"公式编辑器组件"，React 版本已经可以覆盖核心场景。

🔮 未来规划

后续可以继续扩展：

更多 React 使用示例
更完善的主题定制能力
更多公式模板
更细粒度的符号面板配置
与 Markdown / 富文本编辑器的集成示例
更完善的无障碍体验
更完整的 React 文档和最佳实践

🤝 参与贡献

欢迎参与 React MathJax Beautiful 的建设：

提交 Issue
提交 Pull Request
补充 React 使用示例
完善文档
分享实际项目中的使用经验

📖 相关资源

在线演示：https://zzq-github.github.io/vue-mathjax-beautiful
GitHub 仓库：https://github.com/zzq-github/vue-mathjax-beautiful
npm 包：https://www.npmjs.com/package/react-mathjax-beautiful
使用文档：https://zzq-github.github.io/vue-mathjax-beautiful/docs

🌈 结语

React MathJax Beautiful 的目标很简单：让 React 项目中的数学公式编辑变得更简单、更优雅。

无论你正在开发在线教育平台、题库系统、科研工具，还是需要在 React 应用中处理数学内容，React MathJax Beautiful 都可以作为一个轻量、专业、易集成的公式编辑解决方案。

欢迎试用，也欢迎一起完善这个开源项目。