forked from odoo-dev/odoo-editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (120 loc) · 5.94 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
117
118
119
120
121
122
123
124
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>Odoo Editor</title>
<link rel="stylesheet" href="style.css"/>
<!-- <script src="https://use.fontawesome.com/80d52a392c.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>
<!-- add mocha -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script src="editor.js" type="module" defer></script>
<script src="tests/editor.test.js" type="module" defer></script>
</head>
<body>
<div id="control-panel">
<button type="button" id="start-tests">Launch Tests</button>
</div>
<div id="test-container">
<div id="dom-col">
<h1>DOM</h1>
<hr/>
<div id="toolbar" class="toolbar">
<div id="bold" title="Toggle bold" class="fa fa-bold fa-fw btn"></div>
<div id="italic" title="Toggle italic" class="fa fa-italic fa-fw btn active"></div>
<div id="underline" title="Toggle underline" class="fa fa-underline fa-fw btn"></div>
<div id="strikeThrough" title="Toggle strikethrough" class="fa fa-strikethrough fa-fw btn mr8"></div>
<div class="btn" id="paragraph">P</div>
<div class="btn" id="heading1">H1</div>
<div class="btn" id="heading2">H2</div>
<div class="btn mr8" id="heading3">H3</div>
<div class="btn mr8" id="fontColor">C</div>
<div id="blockquote" title="Blockquote" class="fa fa-quote-right fa-fw btn mr8"></div>
<div id="unordered" title="Toggle unordered list" class="fa fa-list-ul fa-fw btn"></div>
<div id="ordered" title="Toggle ordered list" class="fa fa-list-ol fa-fw btn"></div>
</div>
<!-- innerHTML only used in non collaborative mode -->
<div id="dom">
<h1>Title H1</h1>
<h2><br/></h2>
<h3>Subtitle H3 (<u>empty <i>h2</i> above</u>)</h3>
<p>
<b>Select text to see the toolbar</b> dolor sit amet, consectetur
adipiscing elit. Pellentesque et purus vel enim scelerisque faucibus. Duis
malesuada lorem at placerat semper.
<br/>
Praesent cursus ornare convallis. Aliquam vitae vestibulum metus. Morbi
commodolacus ut varius tincidunt. Vivamus in mattis lectus.
Praesent commodo eget nunc non mollis.
</p><p>
<i>
Pe</i><i>lentesque id massa ac mi iaculis tincidunt accumsan vitae
tellus. Aliquam mi massa, suscipit non varius eu, ornare
aliquet ex. Quisque mattis mi in magna viverra blandit.
Curabitur auctor imperdiet nunc. Aenean id massa mauris.
Nulla placerat orci sed blandit luctus. In ac nisl augue.
</i>
</p>
<ul>
<li>first item</li>
<li style="list-style: none;">
<ul>
<li>first sub-item</li>
<li>second sub-item</li>
</ul>
</li>
<li><i>third item</i></li>
<li>fourth <b>item</b></li>
</ul>
<p>
Suspendisse euismod dictum ex
</p>
<div>
div containing a <span class="btn">span button</span> and a <a href="#">link</a> afterwards.
</div>
<p>final paragraph</p>
<div style="background-color: #eee" t="unbreak">
<h1>Unbreakable div</h1>
<p>unbreakable zone: light grey bg</p>
</div>
<p>
Outside unbreak
</p>
<div style="background-color: #eee" t="unbreak">
unbreakable <b id="ub">text field</b> (no block)
</div>
<p>
And here is a table
</p>
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr><tr>
<td><i>italic</i> 2.1</td>
<td></td>
<td><b>bold 3.2</b></td>
</tr>
</table>
<p>
That's all folks!
</p>
</div>
</div>
<div id="vdom-col">
<h1>vDOM</h1>
<hr/>
<div class="toolbar"><!-- Just for vertical alignment with DOM --></div>
<div id="vdom"></div>
</div>
</div>
</body>
</html>