Skip to content

Commit 999d913

Browse files
LonggerererLonggererer
committed
将katex和flowchart植入到预览窗口内渲染
1 parent 4320039 commit 999d913

File tree

2 files changed

+77
-44
lines changed

2 files changed

+77
-44
lines changed

‎src/utils/cdn.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ const externalLinks = {
88
const iframeLinks = {
99
mdCSS: [
1010
'/images/markdown-style.css',
11-
'https://cdn.bootcdn.net/ajax/libs/KaTeX/0.12.0/katex.min.css'
11+
'https://cdn.bootcdn.net/ajax/libs/KaTeX/0.13.13/katex.css'
1212
],
1313
mdJS: [
1414
'https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.min.js',
15-
'https://cdn.bootcdn.net/ajax/libs/flowchart/1.15.0/flowchart.min.js'
15+
'https://cdn.bootcdn.net/ajax/libs/flowchart/1.15.0/flowchart.min.js',
16+
'https://cdn.bootcdn.net/ajax/libs/KaTeX/0.13.13/katex.min.js',
17+
'https://cdn.bootcdn.net/ajax/libs/KaTeX/0.13.13/contrib/auto-render.min.js'
1618
],
1719
commonJS: [
1820
'/images/JSEController.js'

‎src/utils/editor/handleInstanceView.js‎

Lines changed: 73 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,37 @@ class IframeHandler {
4545
${HTMLCode}
4646
${extJS}
4747
<script>
48+
${isMD ? `
49+
!function() {
50+
/**
51+
* Render the KaTeX
52+
* 渲染KaTeX数学公式
53+
*/
54+
renderMathInElement(document.body, {
55+
delimiters: [
56+
{left: '$$', right: '$$', display: true},
57+
{left: '$', right: '$', display: false},
58+
{left: '\\(', right: '\\)', display: false},
59+
{left: '\\[', right: '\\]', display: true}
60+
]
61+
})
62+
/**
63+
* Render the flowchart in markdown
64+
* 渲染markdown中的流程图
65+
*/
66+
const flows = document.querySelectorAll('.language-flow')
67+
for (let i = 0, k = flows.length;i < k;i++) {
68+
const currentFlow = flows[i]
69+
const pre = currentFlow.parentNode
70+
const chartBox = document.createElement('div')
71+
chartBox.id = 'flow'+i
72+
pre.parentNode.replaceChild(chartBox, pre)
73+
const code = currentFlow.value || currentFlow.textContent
74+
flowchart.parse(code).drawSVG('flow'+i)
75+
}
76+
}()
77+
`.trim() : ''
78+
}
4879
${JSCode}
4980
</script>
5081
`.trim()
@@ -57,10 +88,10 @@ class IframeHandler {
5788
iDoc.close()
5889
return new Promise((resolve) => {
5990
this.iframe.onload = () => {
60-
if (isMD) {
61-
this.renderMathFormula()
62-
this.renderFlowchart()
63-
}
91+
// if (isMD) {
92+
// this.renderMathFormula()
93+
// this.renderFlowchart()
94+
// }
6495
resolve(() => {
6596
// 为了让截图中的文字不产生变化，在编译后的代码中加上默认文字样式
6697
head = `
@@ -77,48 +108,48 @@ class IframeHandler {
77108
* 向iframe中插入script标签
78109
* @param {String} JSCode
79110
*/
80-
insertScript (JSCode) {
81-
const doc = this.iframe.contentWindow.document
82-
const script = doc.createElement('script')
83-
script.text = JSCode
84-
doc.body.appendChild(script)
85-
}
111+
// insertScript (JSCode) {
112+
// const doc = this.iframe.contentWindow.document
113+
// const script = doc.createElement('script')
114+
// script.text = JSCode
115+
// doc.body.appendChild(script)
116+
// }
86117

87118
// 渲染markdown中的数学公式
88-
async renderMathFormula () {
89-
const iBody = this.iframe.contentWindow.document.body
90-
let KaTeX
91-
if (!loader.get('KaTeX')) {
92-
// 导入renderMathInElement方法
93-
KaTeX = (await import('katex/dist/contrib/auto-render')).default
94-
loader.set('KaTeX', KaTeX)
95-
} else {
96-
KaTeX = loader.get('KaTeX')
97-
}
98-
KaTeX(iBody, {
99-
delimiters: [
100-
{ left: '$$', right: '$$', display: true },
101-
{ left: '$', right: '$', display: false },
102-
{ left: '\\(', right: '\\)', display: false },
103-
{ left: '\\[', right: '\\]', display: true },
104-
],
105-
})
106-
}
119+
// async renderMathFormula () {
120+
// const iBody = this.iframe.contentWindow.document.body
121+
// let KaTeX
122+
// if (!loader.get('KaTeX')) {
123+
// // 导入renderMathInElement方法
124+
// KaTeX = (await import('katex/dist/contrib/auto-render')).default
125+
// loader.set('KaTeX', KaTeX)
126+
// } else {
127+
// KaTeX = loader.get('KaTeX')
128+
// }
129+
// KaTeX(iBody, {
130+
// delimiters: [
131+
// { left: '$$', right: '$$', display: true },
132+
// { left: '$', right: '$', display: false },
133+
// { left: '\\(', right: '\\)', display: false },
134+
// { left: '\\[', right: '\\]', display: true },
135+
// ],
136+
// })
137+
// }
107138

108139
// 渲染markdown中的流程图
109-
renderFlowchart () {
110-
const iframeWindow = this.iframe.contentWindow
111-
const flows = iframeWindow.document.querySelectorAll('.language-flow')
112-
for (let i = 0, k = flows.length;i < k;i++) {
113-
const currentFlow = flows[i]
114-
const pre = currentFlow.parentNode
115-
const chartBox = document.createElement('div')
116-
chartBox.id = `flow${i}`
117-
pre.parentNode.replaceChild(chartBox, pre)
118-
const code = currentFlow.value || currentFlow.textContent
119-
iframeWindow.flowchart.parse(code).drawSVG(`flow${i}`)
120-
}
121-
}
140+
// renderFlowchart () {
141+
// const iframeWindow = this.iframe.contentWindow
142+
// const flows = iframeWindow.document.querySelectorAll('.language-flow')
143+
// for (let i = 0, k = flows.length;i < k;i++) {
144+
// const currentFlow = flows[i]
145+
// const pre = currentFlow.parentNode
146+
// const chartBox = document.createElement('div')
147+
// chartBox.id = `flow${i}`
148+
// pre.parentNode.replaceChild(chartBox, pre)
149+
// const code = currentFlow.value || currentFlow.textContent
150+
// iframeWindow.flowchart.parse(code).drawSVG(`flow${i}`)
151+
// }
152+
// }
122153

123154
/**
124155
* 拼接html代码

0 commit comments

Comments
 (0)