Vue 集成 wangEditor5 公式编辑器的实现步骤‌

1. 安装公式依赖库‌

安装 KaTeX 或 kityformula‌：根据项目需求选择数学公式渲染引擎。

npm install katex  # 或使用 kityformula

2. 配置公式编辑器插件‌

在 Vue 组件中引入依赖‌：

<script setup>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import 'katex/dist/katex.min.css'  // KaTeX 样式
import katex from 'katex'  // 引入 KaTeX
</script>

初始化编辑器时注入公式配置‌：

const editorConfig = {
  MENU_CONF: {
    formula: {
      katex,  // 绑定 KaTeX 实例
      katexOptions: { displayMode: true }  // 公式渲染模式
    }
  }
}

3. 启用工具栏公式按钮‌

配置 toolbarKeys 添加公式菜单项‌：

const toolbarConfig = {
  insertKeys: {
    index: 5,  // 插入位置
    keys: ['formula']  // 显示公式按钮
  }
}

4. 组件模板与事件绑定‌

模板结构‌：

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar :defaultConfig="toolbarConfig" />
    <Editor 
      v-model="content"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
    />
  </div>
</template>

编辑器实例管理‌：

const editorRef = shallowRef()
const handleCreated = (editor) => {
  editorRef.value = editor  // 存储编辑器实例
}

onBeforeUnmount(() => {
  editorRef.value?.destroy()  // 组件卸载时销毁实例
})

功能验证与调试‌

检查公式按钮渲染‌： 通过浏览器开发者工具查看工具栏是否包含公式图标。
测试公式插入‌： 点击公式按钮，输入 LaTeX 表达式（如 E=mc^2），确认渲染效果。
样式兼容性‌： 确保 KaTeX 的 CSS 文件正确加载，避免公式显示异常。

注意事项‌

版本兼容性‌：

确认 @wangeditor/editor 版本 ≥ v5.3.0。
Vue3 使用 @wangeditor/editor-for-vue@next，Vue2 需安装适配版本。
按需加载优化‌：若仅部分页面使用公式功能，建议动态加载 KaTeX 资源。
服务端渲染 (SSR)‌：在 Nuxt3 等框架中需通过 包裹组件。

通过上述配置可实现公式编辑功能，完整代码示例可参考 wangEditor 公式插件文档 。