Vue MathJax Beautiful，基于Mathjax的数学公式编辑插件

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

在现代Web开发中，处理数学公式一直是一个具有挑战性的任务。今天，我很高兴为大家介绍一个强大的解决方案 ------ Vue MathJax Beautiful，这是一个基于Vue 3和MathJax的专业数学公式编辑器组件库。

🌟 为什么选择Vue MathJax Beautiful？

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

基于业界标准的MathJax引擎
支持完整的LaTeX语法
实时预览功能，所见即所得
240+数学符号和38个常用公式模板

2. 现代化的技术栈

基于Vue 3开发
完整的TypeScript支持
响应式设计，完美适配各种设备
深色模式支持

3. 优秀的用户体验

简洁优雅的界面设计
丰富的符号面板
智能的分类系统
多语言支持（中文/英文）

4. 灵活的使用方式

弹窗模式

适合需要临时编辑公式的场景：

vue 复制代码

<VueMathjaxBeautiful
  v-model="showDialog"
  :existing-latex="formula"
  @insert="handleInsert"
/>

内联模式

适合需要固定编辑区域的场景：

vue 复制代码

<VueMathjaxBeautiful
  :inline-mode="true"
  :existing-latex="formula"
  @insert="handleInsert"
/>

富文本编辑器

支持数学公式的完整富文本编辑器：

vue 复制代码

<VueMathjaxEditor
  v-model="content"
  placeholder="开始编写您的内容..."
  :min-height="'400px'"
/>

🚀 特色功能

智能符号面板
- 符号分类清晰
- 常用公式模板
- 快速预览效果
实时渲染
- 即时预览公式效果
- 快速调整和修改
- 准确的错误提示
主题定制
- 支持亮色/暗色主题
- 可自定义样式
- 响应式设计
多语言支持
- 中文界面
- English Interface
- 易于扩展其他语言

📦 快速开始

安装

bash 复制代码

# npm
npm install vue-mathjax-beautiful

# yarn
yarn add vue-mathjax-beautiful

# pnpm
pnpm add vue-mathjax-beautiful

基础使用

vue 复制代码

<template>
  <div>
    <button @click="showFormulaEditor">打开公式编辑器</button>
    
    <VueMathjaxBeautiful
      v-model="showDialog"
      :existing-latex="formula"
      @insert="handleInsert"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueMathjaxBeautiful } from 'vue-mathjax-beautiful'

const showDialog = ref(false)
const formula = ref('E = mc^2')

const showFormulaEditor = () => {
  showDialog.value = true
}

const handleInsert = (latex) => {
  formula.value = latex
}
</script>

🎯 适用场景

教育领域
- 在线教育平台
- 数学教学系统
- 试题编辑系统
科研写作
- 论文编辑器
- 研究笔记
- 技术文档
内容创作
- 博客平台
- 知识库系统
- 教程制作

🔮 未来规划

更多公式模板
更强大的编辑功能
更多主题选项
性能优化
更多语言支持

🤝 参与贡献

我们欢迎任何形式的贡献，无论是新功能、bug修复，还是文档改进。您可以通过以下方式参与：

提交Issue
提交Pull Request
完善文档
分享使用经验

📖 相关资源

🌈 结语

Vue MathJax Beautiful 不仅仅是一个公式编辑器，它是一个完整的数学内容创作解决方案。无论您是在开发教育产品、科研工具，还是需要处理数学内容的应用，Vue MathJax Beautiful 都能满足您的需求。

欢迎试用 Vue MathJax Beautiful，让我们一起把数学公式编辑变得更简单、更优雅！