-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
58 lines (50 loc) · 1.64 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinyTagEngine JS - Examples</title>
<script src="tag-engine.js" type="text/javascript"></script>
<style type="text/css">
textarea {
width: 800px;
height: 280px;
}
</style>
</head>
<body>
<h1>Tiny Tag-Engine JS</h1>
<br>
<b>Input:</b><br>
<textarea id="input"><center>[feature:1]</center><br>[feature:2]<hr>[mine:1234]<hr>[your:hi]<hr>[slider:12123]<hr>[myown:234234]<hr>...<p>Hello!</p></textarea>
<br>
<b>Output:</b><br>
<textarea id="output"></textarea>
<br>
<b>Preview:</b><br>
<p>NOTE: You need to inspect elements if you going to check custom-html tags.</p>
<div id="preview"></div>
<br>
<script type="text/javascript">
const input = document.querySelector("#input");
const output = document.querySelector("#output");
const preview = document.querySelector("#preview");
// Your config
const tags = {
"feature": (id) => `<feature id=${id}></feature>`,
"slider": (id) => `<slider id=${id}></slider>`,
"myown": (id) => `<myown id=${id}></myown>`,
"your": (id) => `<your id=${id}></your>`,
"mine": (id) => `<mine id=${id}></mine>`,
};
const update = () => {
const res = tag_engine(input.value, tags);
output.innerText = res;
preview.innerHTML = res;
};
input.addEventListener("oninput", update);
window.addEventListener("load", update);
</script>
<hr>
© Copyright <a href="https://github.com/BaseMax/">Max Base</a>, 2021 (<a href="https://github.com/BaseMax/TinyTagEngineJS">GitHub</a>)
</body>
</html>