wangEditor中使用公式插件kityformula踩坑之路

由于之前项目中使用的是wangEditor富文本，最近需要用到公式，又要求能可视化编辑公式，所有只能使用 kityformula 插件，在集成的过程中遇到了很多问题。
项目中使用的版本是：vue3 + wangEditor5 + kityformula

一、成果展示

二、实现过程

参考掘金大佬github项目：https://github.com/fex-team/kityformula

三、踩坑过程

1. 将公式插件 kityformula 放到 public 目录下，因为放在public目录下的资源会被直接复制，不会经过webpack的打包处理
   
   我是自己新建了一个static文件下，并把kityformula放到该目录下

2. 组件中使用iframe去访问publich下的html页面时，总是被重定向到首页
   
   原因： vite.config.js 文件中使用vite-plugin-html 这个插件导致的，只要启用这个插件，iframe访问public下的静态资源页面就会被重定向，本来用这个插件是为了能在index.html里能使用变量，换成了 vite-plugin-ejs 这个插件来配置就好了，这两个插件都是需要安装的
   

vite-plugin-ejs安装说明

1. npm i vite-plugin-ejs
2. import { ViteEjsPlugin } from “vite-plugin-ejs”;
3. 使用 同上截图

3. 公式编辑好之后，如何保存到富文本中，我是以图片的方式保存的
   
4. 自定义插件问题：对话框加载wangEditor，第一次运行没问题，可是再打开就会出错，提示菜单重复引用
   Uncaught (in promise) Error: Duplicated key ‘kityFormula’ in menu items
   
   可能是插件 Boot.registerMenu(kityformula); 注册过一次后，就算组件销毁了，他还一直保留着，生命周期跟vuex一样。

解决办法：定义一个全局的变量 flag ，只要注册过一次就设置 flag = true ，然后根据 flag 来判断是否需要注册

以上总结希望能帮到遇到难题的同学们，有问题欢迎评论区留言~~