Fix:修复Chrome低版本公式无法渲染的问题

This commit is contained in:
街角小林 2023-12-29 16:47:30 +08:00
parent 794d3e9a53
commit eb50b70214
2 changed files with 28 additions and 5 deletions

View File

@ -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

View File

@ -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 ''
}