JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
preserve <script> tags and whitespace in plaintext elements
[peach-html5-editor.git] / demo.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4         <meta charset="UTF-8">
5         <link rel="icon" href="data:null">
6         <title>Peach HTML5 Editor Demo</title>
7         <link rel="stylesheet" href="css.css">
8         <style>
9                 textarea {
10                         box-sizing: border-box;
11                         width: 100%;
12                         height: 200px
13                 }
14                 /* optional */
15                 .peach_html5_editor {
16                         width: 500px;
17                         height: 500px;
18                         margin: 0 auto;
19                 }
20         </style>
21 </head>
22 <body>
23         <h1>Peach HTML5 Editor Demo</h1>
24         <p>This color scheme is just temporary, for testing the cursor and annotations on a variaty of background colors</p>
25         <form action="#" method="get">
26         <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in">
27 &lt;script&gt;console.log("this code should not run in the editor")&lt;/script&gt;
28 &lt;!-- comments are preserved including      whitespace --&gt;
29 &lt;style&gt;
30     h1 { color: #fdf; }
31 &lt;/style&gt;
32         &lt;H1 style="padding: 0; margin: 0 0 7px 0"&gt;Headline!&lt;/h1&gt;
33
34         &lt;div&gt;SVG works: &lt;svg style="display: inline-block; vertical-align: bottom"xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 55 55"&gt;&lt;path d="M27.5 0l6.57 19.87 20.93.11-16.868 12.39 6.364 19.938L27.5 40.094 10.504 52.308l6.364-19.938L0 19.98l20.93-.11z" overflow="visible" fill-rule="evenodd"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;
35
36         &lt;p&gt;  normal text that is hopefully long enough that it will wrap  around\rand
37 spill onto a second line.&lt;/p&gt;    &lt;p  &gt;Text   with lots of extra whitespace
38
39
40
41         in the original html  and no closing p tag       &lt;p&gt;normal paragraph&lt;/p&gt;
42         &lt;p&gt;testing &amp;lt;br&amp;gt; e f&lt;br&gt;g   &lt;br&gt;  h i j &lt;a href="http://example.com"&gt;Click me!&lt;/a&gt; o p q r&lt;/p&gt;
43         &lt;div style="border: 2px solid #fab"&gt;
44         &lt;p&gt; y z     &lt;strong&gt;Bold &lt;em&gt; Italic + Bold&lt;/strong&gt; Italic &lt;/em&gt; Normal&lt;/p&gt;
45 &lt;p style="white-space: pre-wrap"&gt;this &amp;lt;p&amp;gt; has     white-space: pre-wrap&lt;/p&gt;
46
47 &lt;div style="color: black; background: white;"&gt;
48         &lt;div&gt;I'm in a div&lt;/div&gt;
49         &lt;div&gt;I'm in another div&lt;/div&gt;
50 &lt;div&gt;
51 &lt;div&gt;
52 &amp;nbsp;
53 &lt;/div&gt;
54 &lt;/div&gt;
55 &lt;/div&gt;
56 &lt;p&gt;  Above, there's a white div containing 3 divs. The third contains a div which contains just a non-breaking space (&amp;amp;nbsp;)&lt;/p&gt;
57 &lt;p&gt;final paragraph.&lt;/p&gt;
58 &lt;/div&gt;
59         </textarea></p>
60         <p><input id="button" type="submit" value="loading..." disabled></p>
61         </form>
62         <script src="parser.js"></script>
63         <script src="editor.js"></script>
64         <script src="demo.js"></script>
65         <p><a href="https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=tree">Source</a> - <a href="https://gnu.org/licenses/agpl.html">AGPLv3+</a></p>
66 </body>
67 </html>