-
Notifications
You must be signed in to change notification settings - Fork 43
/
index.html
116 lines (110 loc) · 4.65 KB
/
index.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Rich text editor example</title>
<link rel="stylesheet" type="text/css" href="//unpkg.com/@digabi/mathquill/build/mathquill.css">
<link rel="stylesheet" type="text/css" href="//unpkg.com/rich-text-editor/dist/rich-text-editor.css"/>
<script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script>
<style>
body { margin-top: 50px; font-family: sans-serif;}
h1 {font-size: 2em; line-height: 2; margin-bottom: 4em;}
.answer { border: 1px solid #aaa; padding: 5px; box-sizing: content-box; min-height: 100px; font: 17px "Times New Roman"; }
.rich-text-editor img[src^="data:image/svg+xml"] { vertical-align: middle; margin: 4px; padding: 3px 10px; cursor: pointer; border: 1px solid transparent; }
.rich-text-editor.rich-text-focused img[src^="data:image/svg+xml"],
.rich-text-editor:focus img[src^="data:image/svg+xml"] { background: #EDF9FF; border: 1px solid #E6F2F8; }
.rich-text-editor img[src*="data:image/png"] { margin: 4px; }
.rich-text-editor:focus img[src*="data:image/png"],
.rich-text-editor.rich-text-focused img[src*="data:image/png"] { box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2); }
.result { display: none; }
</style>
</head>
<body>
<article>
<section>
<h1>Example of rich text editor</h1>
<h2>Answer</h2>
<div class="answer" id="answer1"></div>
</section>
</article>
<div>Import: <input type="file" id="input"></div>
<div><a download="math-demo-answer.html" id="export" href="javascript:void(0)">Export</a></div>
<script>
window.MathJax = {
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
},
tex: {
packages: ['base', 'ams', 'noerrors', 'noundefined', 'mhchem']
},
loader: {
load: ['[tex]/noerrors', '[tex]/mhchem']
}
};
</script>
<script src="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" id="MathJax-script"></script>
<script>
const answer = document.querySelector('#answer1')
makeRichText(answer, {
screenshotSaver: ({data, type}) =>
new Promise(resolve => {
const reader = new FileReader()
reader.onload = evt => resolve(evt.target.result.replace(/^(data:image)(\/[^;]+)(;.*)/,'$1$3'))
reader.readAsDataURL(new Blob([data], { type }))
}),
baseUrl: 'https://math-demo.abitti.fi',
updateMathImg: ($img, latex) => {
$img.prop({
src: "data:image/svg+xml;base64," + getSvg(latex),
alt: latex.replace(/</g, '\\lt ').replace(/>/g, '\\gt ')
})
$img.closest('[data-js="answer"]').trigger('input')
}
})
const getSvg = function(latex) {
const node = MathJax.tex2svg(latex);
if (node.querySelector("[data-mjx-error]")) {
return (window.btoa(`<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="305px" height="20px" viewBox="0 0 305 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group 2</title>
<defs></defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-241.000000, -219.000000)">
<g transform="translate(209.000000, 207.000000)">
<rect x="-1.58632797e-14" y="0" width="80" height="40"></rect>
<g transform="translate(32.000000, 12.000000)">
<polygon id="Combined-Shape" fill="#9B0000" fill-rule="nonzero" points="0 18 8.04006 2 16.08012 18"></polygon>
<polygon id="Combined-Shape-path" fill="#FFFFFF" points="7 14 9 14 9 16 7 16"></polygon>
<polygon id="Combined-Shape-path" fill="#FFFFFF" points="7 7 9 7 9 12 7 12"></polygon>
</g>
</g>
</g>
</g>
<text x="25" y="16" fill="red">Virhe LaTeX-koodissa / Fel i LaTeX-koden</text>
</svg>`));
} else {
return btoa(
encodeURIComponent(node.firstChild.outerHTML).replace(/%([0-9A-F]{2})/g, (match, p1) =>
String.fromCharCode('0x' + p1)
)
)
}
}
const reader = new FileReader()
reader.onload = x => $('.answer').html(x.target.result)
document.getElementById("input").addEventListener("change", handleFiles, false)
function handleFiles() {
const file = this.files[0]
reader.readAsText(file)
}
$('#export').click(e => {
const link = 'data:text/html;base64,'+btoa($('.answer').html())
$(e.target)
.attr('href', link)
.attr('download', 'math-demo-answer-' + new Date().toISOString().split('.')[0] + '.html')
})
</script>
</body>
</html>