editor/index.html at master · we2app/editor · GitHub

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
<!DOCTYPE html>
<!-- saved from url=(0031)http://htmledit.squarefree.com/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Real-time HTML Editor</title>
<script type="text/javascript">

var editboxHTML =
'<html class="expand close">' +
'<head>' +

'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" style="padding: 10px; color: #F5F2F0; background: #272822;" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';

var defaultStuff = '<h3>Welcome to the real-time HTML editor!<\/h3>\n' +
'<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';

// I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.
var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n  Created by <a href="http://www.we2app.com/" target="_top">We2app<\/a> <\/div>';

var old = '';

function init()
{
  window.editbox.document.write(editboxHTML);
  window.editbox.document.close();
  window.editbox.document.f.ta.value = defaultStuff;
  update();
}

function update()
{
  var textarea = window.editbox.document.f.ta;
  var d = dynamicframe.document;

  if (old != textarea.value) {
    old = textarea.value;
    d.open();
    d.write(old);
    if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
      d.write(extraStuff);
    d.close();
  }

  window.setTimeout(update, 150);
}

</script>

<style>
frame{

}
</style>

</head>

<frameset resizable="yes" cols="50%,*" onload="init();"></div>
  <!-- about:blank confuses opera, so use javascript: URLs instead -->
  <frame  name="editbox" >
  <frame  name="dynamicframe" >
</frameset>


</html>