/
index.ts
83 lines (78 loc) · 3.4 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import {getHTML} from "../markdown/getHTML";
import {getMarkdown} from "../markdown/getMarkdown";
export const download = (vditor: IVditor, content: string, filename: string) => {
const aElement = document.createElement("a");
if ("download" in aElement) {
aElement.download = filename;
aElement.style.display = "none";
aElement.href = URL.createObjectURL(new Blob([content]));
document.body.appendChild(aElement);
aElement.click();
aElement.remove();
} else {
vditor.tip.show(window.VditorI18n.downloadTip, 0);
}
};
export const exportMarkdown = (vditor: IVditor) => {
const content = getMarkdown(vditor);
download(vditor, content, content.substr(0, 10) + ".md");
};
export const exportPDF = (vditor: IVditor) => {
vditor.tip.show(window.VditorI18n.generate, 3800);
const iframe = document.querySelector("#vditorExportIframe") as HTMLIFrameElement;
iframe.contentDocument.open();
iframe.contentDocument.write(`<link rel="stylesheet" href="${vditor.options.cdn}/dist/index.css"/>
<script src="${vditor.options.cdn}/dist/method.min.js"></script>
<div id="preview" style="width: 800px"></div>
<script>
window.addEventListener("message", (e) => {
if(!e.data) {
return;
}
Vditor.preview(document.getElementById('preview'), e.data, {
cdn: "${vditor.options.cdn}",
markdown: {
theme: "${vditor.options.preview.theme}"
},
hljs: {
style: "${vditor.options.preview.hljs.style}"
}
});
setTimeout(() => {
window.print();
}, 3600);
}, false);
</script>`);
iframe.contentDocument.close();
setTimeout(() => {
iframe.contentWindow.postMessage(getMarkdown(vditor), "*");
}, 200);
};
export const exportHTML = (vditor: IVditor) => {
const content = getHTML(vditor);
const html = `<html><head><link rel="stylesheet" type="text/css" href="${vditor.options.cdn}/dist/index.css"/>
<script src="${vditor.options.cdn}/dist/js/i18n/${vditor.options.lang}.js"></script>
<script src="${vditor.options.cdn}/dist/method.min.js"></script></head>
<body><div class="vditor-reset" id="preview">${content}</div>
<script>
const previewElement = document.getElementById('preview')
Vditor.setContentTheme('${vditor.options.preview.theme.current}', '${vditor.options.preview.theme.path}');
Vditor.codeRender(previewElement);
Vditor.highlightRender(${JSON.stringify(vditor.options.preview.hljs)}, previewElement, '${vditor.options.cdn}');
Vditor.mathRender(previewElement, {
cdn: '${vditor.options.cdn}',
math: ${JSON.stringify(vditor.options.preview.math)},
});
Vditor.mermaidRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
Vditor.markmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
Vditor.flowchartRender(previewElement, '${vditor.options.cdn}');
Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
Vditor.mindmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
Vditor.abcRender(previewElement, '${vditor.options.cdn}');
Vditor.mediaRender(previewElement);
Vditor.speechRender(previewElement);
</script>
<script src="${vditor.options.cdn}/dist/js/icons/${vditor.options.icon}.js"></script></body></html>`;
download(vditor, html, content.substr(0, 10) + ".html");
};