Vue MathJax Beautiful

🚀 精简、高效的 Vue 3 数学公式编辑器组件库

特性

• 🧮 专业公式编辑 - 基于 MathJax 引擎，支持完整的 LaTeX 语法
• 🎨 丰富符号面板 - 240+ 数学符号和 38 个常用公式模板
• 👀 实时预览 - 所见即所得的公式编辑体验
• 📝 富文本编辑 - 支持粗体、斜体、下划线等文本格式
• 🌍 国际化支持 - 内置中文和英文界面
• 🚀 Vue 3 + TypeScript - 现代化的技术栈
• 📱 响应式设计 - 完美适配桌面端和移动端
• 🔧 易于集成 - 简单的 API 设计，轻松集成到现有项目
• ⚡ 工具函数 - 丰富的 LaTeX 处理工具函数

安装

1npm install vue-mathjax-beautiful

或使用 yarn：

1yarn add vue-mathjax-beautiful

或使用 pnpm：

1pnpm add vue-mathjax-beautiful

快速开始

基本使用

1<template>
2  <div>
3    <!-- 公式编辑器弹窗 -->
4    <VueMathjaxBeautiful
5      v-model="showDialog"
6      :existing-latex="formula"
7      title="数学公式编辑器"
8      @insert="handleInsert"
9      @cancel="handleCancel"
10    />
11    
12    <!-- 富文本编辑器 -->
13    <VueMathjaxEditor 
14      v-model="content"
15      placeholder="开始编写您的内容，支持数学公式..."
16      :min-height="'300px'"
17      @change="handleContentChange"
18    />
19  </div>
20</template>
21
22<script setup lang="ts">
23import { ref, onMounted } from 'vue'
24import { 
25  VueMathjaxBeautiful, 
26  VueMathjaxEditor,
27  initMathJax 
28} from 'vue-mathjax-beautiful'
29
30const showDialog = ref(false)
31const formula = ref('E = mc^2')
32const content = ref('')
33
34// 初始化 MathJax
35onMounted(async () => {
36  await initMathJax()
37})
38
39const handleInsert = (latex: string) => {
40  formula.value = latex
41  showDialog.value = false
42}
43
44const handleCancel = () => {
45  showDialog.value = false
46}
47
48const handleContentChange = (value: string) => {
49  console.log('Content changed:', value)
50}
51</script>

全局注册

1import { createApp } from 'vue'
2import VueMathjaxBeautiful from 'vue-mathjax-beautiful'
3import App from './App.vue'
4
5const app = createApp(App)
6app.use(VueMathjaxBeautiful)
7app.mount('#app')

API 文档

VueMathjaxBeautiful (公式编辑器)

Props

属性名	类型	默认值	说明
v-model	boolean	false	控制弹窗显示状态
title	string	"公式编辑器"	弹窗标题文字
subtitle	string	""	弹窗副标题文字
placeholder	string	""	输入框占位符文本
inline-mode	boolean	false	是否启用内联模式
existing-latex	string	""	预设的LaTeX代码
show-theme-toggle	boolean	true	是否显示主题切换按钮

Events

事件名	参数	说明
@insert	(latex: string)	公式插入时触发
@cancel	()	取消操作时触发

VueMathjaxEditor (富文本编辑器)

Props

属性名	类型	默认值	说明
v-model	string	""	绑定的内容值
placeholder	string	""	占位符文本
min-height	string	"200px"	最小高度
width	string	"100%"	编辑器宽度
readonly	boolean	false	只读模式
show-toolbar	boolean	true	是否显示工具栏
theme	string	"default"	主题名称
auto-focus	boolean	false	是否自动聚焦

Events

事件名	参数	说明
@change	(value: string)	内容变化时触发
@focus	()	编辑器获得焦点时触发
@blur	()	编辑器失去焦点时触发
@ready	()	编辑器准备就绪时触发
@error	(error: any)	发生错误时触发

工具函数 API

Vue MathJax Beautiful 提供了丰富的 LaTeX 处理工具函数，您可以在项目中直接使用：

核心转换函数

1import { 
2  initMathJax,
3  convertLatexToSvg,
4  batchConvertLatex,
5  extractLatexFromSvg 
6} from 'vue-mathjax-beautiful'
7
8// 初始化 MathJax 引擎
9await initMathJax()
10
11// 将 LaTeX 转换为 SVG
12const svgContent = await convertLatexToSvg('$E = mc^2$')
13
14// 批量转换
15const contents = [{ content: '$x^2$' }, { content: '$y^3$' }]
16const converted = await batchConvertLatex(contents)
17
18// 从 SVG 提取 LaTeX
19const latex = extractLatexFromSvg('<svg data-latex="E=mc^2">...</svg>')

匹配和检测函数

1import { 
2  matchLatex,
3  hasLatexFormula,
4  type MatchLatexResult 
5} from 'vue-mathjax-beautiful'
6
7const text = '这是一个公式: $E=mc^2$ 和另一个: $$\\int_0^1 x dx$$'
8
9// 检测是否包含公式
10if (hasLatexFormula(text)) {
11  // 获取所有公式匹配信息
12  const matches: MatchLatexResult[] = matchLatex(text)
13  
14  matches.forEach(match => {
15    console.log('公式内容:', match.content)
16    console.log('类型:', match.isInline ? '行内' : '独立')
17    console.log('位置:', match.start, '-', match.end)
18  })
19}

DOM 操作函数

1import { clearMathTags } from 'vue-mathjax-beautiful'
2
3// 清理 DOM 元素中的特定数学标签
4const element = document.getElementById('content')
5clearMathTags(element, 'mjx-container')

类型定义

1// 导入类型定义
2import type {
3  MatchLatexResult,
4  Symbol,
5  Category,
6  Locale,
7  Messages
8} from 'vue-mathjax-beautiful'
9
10// LaTeX 匹配结果
11interface MatchLatexResult {
12  formula: string      // 原始公式文本
13  content: string      // 公式内容
14  start: number        // 起始位置
15  end: number          // 结束位置
16  wrapper: string      // 处理后的公式
17  isInline: boolean    // 是否为行内公式
18}
19
20// 数学符号
21interface Symbol {
22  latex: string
23  symbol: string
24  description: LocalizedText
25}
26
27// 符号分类
28interface Category {
29  name: string
30  title: LocalizedText
31  symbols: Symbol[]
32}

完整示例

Vue 3 组合式 API

1<template>
2  <div class="math-editor-container">
3    <!-- 富文本编辑器 -->
4    <VueMathjaxEditor
5      v-model="content"
6      :min-height="'300px'"
7      :readonly="isReadonly"
8      placeholder="开始编写您的数学内容..."
9      @change="handleContentChange"
10      @ready="handleEditorReady"
11    />
12
13    <!-- 公式编辑器弹窗 -->
14    <VueMathjaxBeautiful
15      v-model="showFormulaDialog"
16      :existing-latex="selectedFormula"
17      title="高级公式编辑器"
18      @insert="handleFormulaInsert"
19      @cancel="handleCancel"
20    />
21    
22    <!-- 操作按钮 -->
23    <div class="toolbar">
24      <button @click="openFormulaEditor">插入公式</button>
25      <button @click="toggleReadonly">切换只读</button>
26      <button @click="analyzeFormulas">分析公式</button>
27    </div>
28  </div>
29</template>
30
31<script setup lang="ts">
32import { ref, onMounted } from 'vue'
33import {
34  VueMathjaxEditor, 
35  VueMathjaxBeautiful,
36  initMathJax, 
37  matchLatex,
38  hasLatexFormula,
39  type MatchLatexResult
40} from 'vue-mathjax-beautiful'
41
42// 响应式数据
43const content = ref('')
44const showFormulaDialog = ref(false)
45const selectedFormula = ref('')
46const isReadonly = ref(false)
47
48// 初始化 MathJax
49onMounted(async () => {
50  try {
51    await initMathJax()
52    console.log('MathJax 初始化成功')
53  } catch (error) {
54    console.error('MathJax 初始化失败:', error)
55  }
56})
57
58// 事件处理函数
59const handleContentChange = (value: string) => {
60  content.value = value
61  console.log('内容变化:', value)
62}
63
64const handleEditorReady = () => {
65  console.log('编辑器准备就绪')
66}
67
68const handleFormulaInsert = (latex: string) => {
69  // 将公式插入到内容中
70  content.value += `$${latex}$`
71  showFormulaDialog.value = false
72}
73
74const handleCancel = () => {
75  showFormulaDialog.value = false
76}
77
78const openFormulaEditor = () => {
79  selectedFormula.value = 'E = mc^2'
80  showFormulaDialog.value = true
81}
82
83const toggleReadonly = () => {
84  isReadonly.value = !isReadonly.value
85}
86
87const analyzeFormulas = () => {
88  if (hasLatexFormula(content.value)) {
89    const matches: MatchLatexResult[] = matchLatex(content.value)
90    console.log('找到的公式:', matches)
91    
92    matches.forEach((match, index) => {
93      console.log(`公式 ${index + 1}:`, {
94        content: match.content,
95        type: match.isInline ? '行内' : '独立',
96        position: `${match.start}-${match.end}`
97      })
98    })
99  } else {
100    console.log('内容中没有找到公式')
101  }
102}
103</script>
104
105<style scoped>
106.math-editor-container {
107  max-width: 800px;
108  margin: 0 auto;
109  padding: 20px;
110}
111
112.toolbar {
113  margin-top: 20px;
114  display: flex;
115  gap: 10px;
116}
117
118button {
119  padding: 8px 16px;
120  background: #007bff;
121  color: white;
122  border: none;
123  border-radius: 4px;
124  cursor: pointer;
125}
126
127button:hover {
128  background: #0056b3;
129}
130</style>

Options API

1<template>
2  <div>
3    <VueMathjaxEditor 
4      v-model="content"
5      @change="handleChange"
6    />
7  </div>
8</template>
9
10<script>
11import { VueMathjaxEditor, initMathJax } from 'vue-mathjax-beautiful'
12
13export default {
14  components: {
15    VueMathjaxEditor
16  },
17  
18  data() {
19    return {
20      content: ''
21    }
22  },
23  
24  async mounted() {
25    await initMathJax()
26  },
27  
28  methods: {
29    handleChange(value) {
30      this.content = value
31    }
32  }
33}
34</script>

国际化

组件内置中英文支持，您也可以自定义语言：

1import { useI18n } from 'vue-mathjax-beautiful'
2
3const { t, setLocale } = useI18n()
4
5// 切换语言
6setLocale('en-US') // 或 'zh-CN'
7
8// 使用翻译
9console.log(t('common.save'))

浏览器兼容性

• Chrome >= 88
• Firefox >= 85
• Safari >= 14
• Edge >= 88

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

查看 CHANGELOG.md 了解版本更新详情。