使用富文本的公式formula模块

项目场景：

用富文本的公式模块做一个可以实现输入简单的公式显示功能

---

问题描述：

去网上找了些例子来看，发现富文本的公式模块要配合Katex使用，因为我自己的项目是用vue的脚手架的，就想着用npm安装，发现Vue-Katex这个插件可以用npm安装,就直接按照教程安装了，结果后面测试的时候发现第一次可以实现，后面就一直报错了。下面记录一下我的使用。

1.安装Vue-Katex

npm i vue-katex -P

2.在main.js引入

import VueKatex from 'vue-katex'
Vue.use(VueKatex)

3.在组件页面引入

import VueKatex from 'vue-katex'
import '../../../node_modules/katex/dist/katex.min.css';

4.在组件页面的mounted里面编写

mounted() {
  window.VueKatex = VueKatex;
}

这一步是去网上找了解决方案，后面加进去的，别人用这个方法解决了，我用了这个方法就实现了一次。后面就一直报如下的错误。心好累，怎么就变成一次性了。

ERROR Error: Formula module requires KaTeX

---

原因分析：

具体是什么原因我也想不明白，希望有大佬路过可以指点一下

---

解决方案：

后面又去认真看了Katex的文档，决定放弃npm的引入，直接使用标签链接引入

1.在index.html的头部里面引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
        
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
    integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
    crossorigin="anonymous"></script>

2.再引入script标签代码

<script>
  window.WebFontConfig = {
    custom: {
      families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
        'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
        'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
        'KaTeX_Size4', 'KaTeX_Typewriter'],
    },
  };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script>

问题就解决了。 效果：

在此说明一下我用的是富文本vue-quill-editor
Katex的官方文档请参考: https://katex.org/docs/browser.html.