-
Notifications
You must be signed in to change notification settings - Fork 11
/
editor.html
107 lines (84 loc) · 2.18 KB
/
editor.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
<!doctype html>
<html lang="en">
<head>
<style>
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 1em;
font-family: "Source Code Pro", "Consolas", "Monaco", "Courier New", monospace;
}
</style>
</head>
<body>
<div id="editor"></div>
<textarea id="boilerplate" style="display:none"><!doctype html>
<html lang="en">
<head>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
start writin' ur codez...
<script>
alert('javascript works too');
</script>
</body>
</html></textarea>
<script src="libraries/ace-builds-1.1.01/src-min/ace.js" charset="utf-8"></script>
<script>
'use strict';
(function(){
// http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(parent.location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var code = getParameterByName('code');
if(code){
var id = '#' + new Date().getTime();
localStorage.setItem(id, code);
parent.location = '/' + id;
return;
}
// grab the hash from the parent frame
var hash = parent.location.hash;
if(!hash){
// no hash. let's set the hash to a timestamp
// the hash change will trigger the parent window to reload
parent.location.hash = new Date().getTime();
return;
}
// use the stored code otherwise start with our simple boilerplate
code = localStorage.getItem(hash+'') || document.getElementById('boilerplate').value;
// fire up ACE
var editor = ace.edit('editor');
editor.setTheme('ace/theme/solarized_dark'),
editor.getSession().setMode('ace/mode/html');
editor.getSession().setTabSize(4);
editor.getSession().setUseSoftTabs(true);
// anytime the editor changes
editor.on('change', function(e){
// grab the code
code = editor.getValue();
// update localstorage
localStorage.setItem(hash, code)
// pass the code to the parent
parent.postMessage(code, '*');
});
// on load, update the editor with the code
editor.setValue(code);
editor.clearSelection();
editor.focus();
})();
</script>
</body>
</html>