vue-mathjax-beautiful

Vue MathJax Beautiful

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

特性

• 🧮 专业公式编辑 - 基于 MathJax 引擎，支持完整的 LaTeX 语法
• 🎨 丰富符号面板 - 240+ 数学符号和 38 个常用公式模板
• 👀 实时预览 - 所见即所得的公式编辑体验
• 🌍 国际化支持 - 内置中文和英文界面
• 🚀 Vue 3 + TypeScript - 现代化的技术栈
• 📱 响应式设计 - 完美适配桌面端和移动端
• 🔧 易于集成 - 简单的 API 设计，轻松集成到现有项目
• ⚡ 工具函数 - 丰富的 LaTeX 处理工具函数
• 🎨 主题系统 - 支持亮色/暗色/自动主题，可自定义主题
• 📱 移动端优化 - 虚拟键盘适配、触摸优化、安全区域支持
• ⚡ 性能优化 - 虚拟列表、LRU 缓存、懒加载、内存泄漏防护

安装

npm install vue-mathjax-beautiful

或使用 yarn：

yarn add vue-mathjax-beautiful

或使用 pnpm：

pnpm add vue-mathjax-beautiful

快速开始

基本使用

<template>
  <div>
    <!-- 公式编辑器弹窗 -->
    <VueMathjaxBeautiful
      v-model="showDialog"
      :existing-latex="formula"
      title="数学公式编辑器"
      @insert="handleInsert"
      @close="handleClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { 
  VueMathjaxBeautiful,
  initMathJax 
} from 'vue-mathjax-beautiful'

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

// 初始化 MathJax
onMounted(async () => {
  await initMathJax()
})

const handleInsert = (latex: string) => {
  formula.value = latex
  showDialog.value = false
}

const handleClose = () => {
  showDialog.value = false
}
</script>

全局注册

import { createApp } from 'vue'
import VueMathjaxBeautiful from 'vue-mathjax-beautiful'
import App from './App.vue'

const app = createApp(App)
app.use(VueMathjaxBeautiful)
app.mount('#app')

API 文档

样式入口

import 'vue-mathjax-beautiful/style.css'
// 兼容旧写法：import 'vue-mathjax-beautiful/dist/style.css'

VueMathjaxBeautiful

公式编辑器组件，支持弹窗模式和内联模式。

Props

Events

@cancel 不是当前组件事件；关闭动作请监听 @close。

VueMathjaxEditor

富文本编辑器组件，内置 VueMathjaxBeautiful 作为公式插入器。

主要事件：update:modelValue、change、focus、blur、ready、error、themeChange、formatToggle、formulaInsert、imageUpload、imageUploaded、imageError、save、charLimitReached、wordCountChange、charCountChange。

工具函数 API

所有下面的函数都可以从包根路径导入：

import {
  initMathJax,
  loadMathJax,
  lazyLoadMathJax,
  isMathJaxReady,
  preloadMathJax,
  resetMathJaxLoadState,
  convertLatexToSvg,
  batchConvertLatex,
  matchLatex,
  hasLatexFormula,
  sanitizeHtml
} from 'vue-mathjax-beautiful'

MathJax 加载

LaTeX 处理

安全清洗

组件内部会在写入 v-html 前调用 DOMPurify 清洗 MathJax SVG/HTML。你在业务代码里手动渲染 HTML 时，也可以复用同一套 API：

import { sanitizeHtml, escapeHtml } from 'vue-mathjax-beautiful'

const safeHtml = sanitizeHtml(untrustedHtml)
const escapedText = escapeHtml(userInput)

其他导出

类型定义

import type {
  VueMathjaxBeautifulProps,
  VueMathjaxBeautifulEvents,
  VueMathjaxBeautifulThemeConfig,
  VueMathjaxEditorProps,
  VueMathjaxEditorEvents,
  MathJaxConfig,
  MathJaxInstance,
  MathJaxRenderOptions,
  MatchLatexResult,
  Symbol,
  Category,
  Locale,
  DataLocale,
  Messages,
  Theme,
  ThemeColors,
  ThemeConfig,
  Breakpoint,
  MobileOptimizationConfig,
  VirtualListOptions,
  VirtualListItem
} from 'vue-mathjax-beautiful'

主题系统

使用主题

import { useTheme, presetThemes } from 'vue-mathjax-beautiful'

// 使用自动主题（跟随系统）
const { theme, actualTheme, cssVariables, toggleTheme } = useTheme('auto')

// 使用预设主题
const { themeConfig } = useTheme('light', presetThemes.purple)

// 创建自定义主题
import { createTheme } from 'vue-mathjax-beautiful'
const myTheme = createTheme('myTheme',
  { primary: '#ff0000', accent: '#00ff00' },  // light
  { primary: '#ff4444', accent: '#44ff44' }   // dark
)

主题类型

• light - 亮色主题
• dark - 暗色主题
• auto - 自动（跟随系统偏好）

移动端优化

移动端检测

import { useMobile, useMobileOptimization, useSafeArea } from 'vue-mathjax-beautiful'

// 基础检测
const { isMobile, isTablet, isTouch, screenSize } = useMobile()

// 完整移动端优化
const { 
  isOptimizationEnabled,
  virtualKeyboardHeight,
  responsiveStyles,
  touchHandlers 
} = useMobileOptimization({
  virtualKeyboard: { adjustHeight: true },
  touch: { swipeEnabled: true },
  performance: { reduceAnimations: true },
  ui: { compactMode: true, bottomSheet: true }
})

// 安全区域适配（刘海屏）
const { safeAreaInsets, cssSafeArea } = useSafeArea()

国际化

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

import { useI18n } from 'vue-mathjax-beautiful'

const { t, setLocale } = useI18n()

// 切换语言
setLocale('en-US') // 或 'zh-CN'

// 使用翻译
console.log(t('common.save'))

浏览器兼容性

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

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

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