Feat：1.支持自定义katex库渲染模式的实例化选项；2.公式插件会默认引入katex库的样式，增加自定义字体文件路径的实例化选项

simple-mind-map/src/constants/defaultOptions.js

@@ -381,6 +381,12 @@ export const defaultOpt = {
   // 【Formula插件】
   // 是否开启在富文本编辑框中直接编辑数学公式
   enableEditFormulaInRichTextEdit: true,
+  // katex库的字体文件的请求路径。仅当katex的output配置为html时才会请求字体文件。可以通过mindMap.formula.getKatexConfig()方法来获取当前的配置
+  // 字体文件可以从node_modules中找到：katex/dist/fonts/。可以上传到你的服务器或cdn
+  // 最终的字体请求路径为`${katexFontPath}fonts/KaTeX_AMS-Regular.woff2`，可以自行拼接进行测试是否可以访问
+  katexFontPath: 'https://unpkg.com/katex@0.16.11/dist/',
+  // 自定义katex库的输出模式。默认当Chrome内核100以下会使用html方式，否则使用mathml方式，如果你有自己的规则，那么可以传递一个函数，函数返回值为：mathml或html
+  getKatexOutputType: null,
 
   // 【RichText插件】
   // 转换富文本内容，当进入富文本编辑时，可以通过该参数传递一个函数，函数接收文本内容，需要返回你处理后的文本内容

simple-mind-map/src/plugins/Formula.js

@@ -1,6 +1,7 @@
 import katex from 'katex'
 import Quill from 'quill'
 import { getChromeVersion } from '../utils/index'
+import { getBaseStyleText, getFontStyleText } from './FormulaStyle'
 
 // 数学公式支持插件
 // 该插件在富文本模式下可用
@@ -11,6 +12,9 @@ class Formula {
     this.mindMap = opt.mindMap
     window.katex = katex
     this.init()
+    this.config = this.getKatexConfig()
+    this.cssEl = null
+    this.addStyle()
     this.extendQuill()
   }
 
@@ -29,11 +33,18 @@ class Formula {
       errorColor: '#f00',
       output: 'mathml' // 默认只输出公式
     }
-    // Chrome内核100以下，mathml配置公式无法正确渲染
-    const chromeVersion = getChromeVersion()
-    if (chromeVersion && chromeVersion <= 100) {
-      config.output = 'html'
-    }
+    let { getKatexOutputType } = this.mindMap.opt
+    getKatexOutputType =
+      getKatexOutputType ||
+      function () {
+        // Chrome内核100以下，mathml配置公式无法正确渲染
+        const chromeVersion = getChromeVersion()
+        if (chromeVersion && chromeVersion <= 100) {
+          return 'html'
+        }
+      }
+    const output = getKatexOutputType() || 'mathml'
+    config.output = ['mathml', 'html'].includes(output) ? output : 'mathml'
     return config
   }
 
@@ -46,7 +57,7 @@ class Formula {
       static create(value) {
         let node = super.create(value)
         if (typeof value === 'string') {
-          katex.render(value, node, self.getKatexConfig())
+          katex.render(value, node, self.config)
           node.setAttribute('data-value', value)
         }
         return node
@@ -56,6 +67,27 @@ class Formula {
     Quill.register('formats/formula', CustomFormulaBlot, true)
   }
 
+  getStyleText() {
+    const { katexFontPath } = this.mindMap.opt
+    let text = ''
+    if (this.config.output === 'html') {
+      text = getFontStyleText(katexFontPath)
+    }
+    text += getBaseStyleText()
+    return text
+  }
+
+  addStyle() {
+    this.cssEl = document.createElement('style')
+    this.cssEl.type = 'text/css'
+    this.cssEl.innerHTML = this.getStyleText()
+    document.head.appendChild(this.cssEl)
+  }
+
+  removeStyle() {
+    document.head.removeChild(this.cssEl)
+  }
+
   // 给指定的节点插入指定公式
   insertFormulaToNode(node, formula) {
     let richTextPlugin = this.mindMap.richText
@@ -136,6 +168,16 @@ class Formula {
       return false
     }
   }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.removeStyle()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.removeStyle()
+  }
 }
 
 Formula.instanceName = 'formula'