forked from tiff/wysihtml5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (89 loc) · 4.86 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
<!DOCTYPE html>
<html>
<head>
<meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
<meta charset="utf-8">
<title>wysihtml5 - A better approach to rich text editing</title>
<script src="parser_rules/advanced.js" ></script>
<script src="dist/wysihtml5-0.3.0.js" ></script>
<!--[if lt IE 9]>
<script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
<![endif]-->
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="wysihtml5">
<div id="wysihtml5-editor-toolbar">
<header>
<ul class="commands">
<li data-wysihtml5-command="bold" title="Make text bold (CTRL + B)" class="command"></li>
<li data-wysihtml5-command="italic" title="Make text italic (CTRL + I)" class="command"></li>
<li data-wysihtml5-command="insertUnorderedList" title="Insert an unordered list" class="command"></li>
<li data-wysihtml5-command="insertOrderedList" title="Insert an ordered list" class="command"></li>
<li data-wysihtml5-command="createLink" title="Insert a link" class="command"></li>
<li data-wysihtml5-command="insertImage" title="Insert an image" class="command"></li>
<li data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" title="Insert headline 1" class="command"></li>
<li data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" title="Insert headline 2" class="command"></li>
<li data-wysihtml5-command-group="foreColor" class="fore-color" title="Color the selected text" class="command">
<ul>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="silver"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="gray"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="maroon"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="purple"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="olive"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="navy"></li>
<li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue"></li>
</ul>
</li>
<li data-wysihtml5-action="change_view" title="Show HTML" class="action"></li>
</ul>
</header>
<div data-wysihtml5-dialog="createLink" style="display: none;">
<label>
Link:
<input data-wysihtml5-dialog-field="href" value="http://">
</label>
<a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
</div>
<div data-wysihtml5-dialog="insertImage" style="display: none;">
<label>
Image:
<input data-wysihtml5-dialog-field="src" value="http://">
</label>
<a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
</div>
</div>
<textarea id="wysihtml5-editor" spellcheck="false" wrap="off" autofocus placeholder="Enter something ...">
<h1>WYSIHTML5 - A better approach to rich text editing</h1>
<p>wysihtml5 is an <span class="wysiwyg-color-green"><a href="https://github.com/xing/wysihtml5">open source</a></span> rich text editor based on HTML5 technology and the progressive-enhancement approach.
It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.</p>
<h2>Features</h2>
<ul>
<li>It's fast and lightweight (smaller than TinyMCE, Aloha, ...)</li>
<li>Auto-linking of urls as-you-type</li>
<li>Generates valid and semantic HTML5 markup (even when the content is pasted from MS Word)</li>
<li>Uses class names instead of inline styles</li>
<li>Unifies line break handling across browsers</li>
<li>Uses sandboxed iframes in order to prevent identity theft through XSS</li>
<li>Speech-input for Chrome</li>
<li>No jQuery required</li>
</ul>
</textarea>
</div>
<script>
var editor = new wysihtml5.Editor("wysihtml5-editor", {
toolbar: "wysihtml5-editor-toolbar",
parserRules: wysihtml5ParserRules
});
editor.on("load", function() {
var composer = editor.composer,
h1 = editor.composer.element.querySelector("h1");
if (h1) {
composer.selection.selectNode(h1);
}
});
</script>
</body>
</html>