mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Fix:修复Chrome低版本公式无法渲染的问题
This commit is contained in:
parent
794d3e9a53
commit
eb50b70214
@ -1,5 +1,7 @@
|
||||
import katex from 'katex'
|
||||
import Quill from 'quill'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import { getChromeVersion } from '../utils/index'
|
||||
|
||||
// 数学公式支持插件
|
||||
// 该插件在富文本模式下可用
|
||||
@ -12,19 +14,31 @@ class Formula {
|
||||
this.extendQuill()
|
||||
}
|
||||
|
||||
// 获取katex配置
|
||||
getKatexConfig() {
|
||||
const config = {
|
||||
throwOnError: false,
|
||||
errorColor: '#f00',
|
||||
output: 'mathml' // 默认只输出公式
|
||||
}
|
||||
// Chrome内核100以下,mathml配置公式无法正确渲染
|
||||
const chromeVersion = getChromeVersion()
|
||||
if (chromeVersion && chromeVersion <= 100) {
|
||||
config.output = 'html'
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
// 修改formula格式工具
|
||||
extendQuill() {
|
||||
const QuillFormula = Quill.import('formats/formula')
|
||||
const self = this
|
||||
|
||||
class CustomFormulaBlot extends QuillFormula {
|
||||
static create(value) {
|
||||
let node = super.create(value)
|
||||
if (typeof value === 'string') {
|
||||
katex.render(value, node, {
|
||||
throwOnError: false,
|
||||
errorColor: '#f00',
|
||||
output: 'mathml' // 增加该配置,默认只输出公式
|
||||
})
|
||||
katex.render(value, node, self.getKatexConfig())
|
||||
node.setAttribute('data-value', value)
|
||||
}
|
||||
return node
|
||||
|
||||
@ -1018,3 +1018,12 @@ export const checkNodeListIsEqual = (list1, list2) => {
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 获取浏览器的chrome内核版本
|
||||
export const getChromeVersion = () => {
|
||||
const match = navigator.userAgent.match(/\s+Chrome\/(.*)\s+/)
|
||||
if (match && match[1]) {
|
||||
return Number.parseFloat(match[1])
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user