-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
Copy pathindex.html
243 lines (220 loc) · 10.6 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A tiny, opensource, Bootstrap WYSIWYG rich text editor</title>
<meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5" />
<meta name="description" content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor" />
<link href="bower_components/google-code-prettify/src/prettify.css" rel="stylesheet" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="pull-right"></div>
<h1>
bootstrap-wysiwyg <br /><small>tiny WYSIWYG rich text
editor for Bootstrap</small>
</h1>
<hr />
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown"
title="Font"><i class="fa fa-font"></i><b class="caret"></b>
</a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown"
title="Font Size"><i class="fa fa-text-height"></i> <b
class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5" class="fs-Five">Huge</a></li>
<li><a data-edit="fontSize 3" class="fs-Three">Normal</a></li>
<li><a data-edit="fontSize 1" class="fs-One">Small</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
<a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
<a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<a class="btn btn-default" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
<a class="btn btn-default" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-outdent"></i></a>
<a class="btn btn-default" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
<div class="dropdown-menu input-append">
<input placeholder="URL" type="text" data-edit="createLink" />
<button class="btn" type="button">Add</button>
</div>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-unlink"></i></a>
<span class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"> <i class="fa fa-picture-o"></i>
<input class="imgUpload" type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</span>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn btn-default" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div>
<input class="pull-right" type="text" data-edit="inserttext" id="voiceBtn" />
</div>
<div id="editor" class="lead" data-placeholder="Go ahead…"></div>
</div>
<div class="row">
<div class="col-md-6">
<h2>About</h2>
<p>
This tiny (8KB, < 250 lines) jQuery Bootstrap plugin turns any
DIV into a WYSIWYG rich-content editor, inspired by <a
href="http://premiumsoftware.net/cleditor/">CLEditor</a> and <a
href="http://jhollingworth.github.com/bootstrap-wysihtml5/">bootstrap-wysihtml5</a>.
</p>
<p>This code is a fork which is currently 16+ commits behind.
I've forked it and updated it with the changes that were in the
pull request queue and found a few more around the place too.</p>
<p>This project does not intend to replace the original, but it
is more up to date.</p>
<ul>
<li>Thanks to</li>
<li><a href='https://github.com/jordanh'>@jordanh</a></li>
<li><a href='https://github.com/beatnbite'>@beatnbite</a></li>
<li><a href='https://github.com/brutuscat'>@brutuscat</a></li>
<li><a href='https://github.com/VictorBjelkholm'>@VictorBjelkholm</a></li>
<li><a href='https://github.com/mrmrs'>@mrmrs</a></li>
<li><a href='https://github.com/tilleryd'>@tilleryd</a></li>
<li><a href='https://github.com/pnevels'>@pnevels</a></li>
</ul>
</div>
<div class="col-md-6">
<h2>Usage</h2>
<pre class="prettyprint linenums">$('#editor').wysiwyg();</pre>
<p>Don't forget to style your editor div:</p>
<pre class="prettyprint linenums">#editor {overflow:scroll; max-height:300px}</pre>
<p>
If you want to use this for a mobile web site, make sure to read
about <a href="https://github.com/mindmup/bootstrap-wysiwyg#styling-for-mobile-devices">how
to style it</a> to optimise mobile screen usage and experience (please
note that this demo page isn't optimised for mobile access).
</p>
<p>Optionally, also create a toolbar (see the source of this
page for an example):</p>
<pre class="prettyprint linenums"><div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
...
</div>
</pre>
<p>
In the toolbar, execute simple commands by adding a data-edit attribute to a link.
<p>
<pre class="prettyprint linenums"><a data-edit="bold">...</a></pre>
<p>execute more complex commands by adding an argument after a
blank or providing an input with a data-edit command (the input
value is used as an argument). In case of file inputs, the file
contents are read in using the FileReader API and used as the
command value.
<p>
<pre class="prettyprint linenums"><a data-edit="fontName Arial">...</a>
...
<input type="text" data-edit="createLink"/>
...
<input type="file" data-edit="insertImage" /></pre>
<p>
Use standard jQuery methods to access and set content and focus. You can also ask for cleaned up HTML content:
</p>
<pre class="prettyprint linenums">$('#editor').cleanHtml()</pre>
<p style="text-align: center;">
<a class="btn btn-large btn-default jumbo"
href="https://github.com/steveathon/bootstrap-wysiwyg/">View
project on Github</a>
</p>
<p style="text-align: center; margin-top: 20px"></p>
</div>
</div>
</div>
<a href="https://github.com/steveathon/bootstrap-wysiwyg/">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
alt="Fork me on GitHub">
</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bower_components/jquery.hotkeys/jquery.hotkeys.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="bower_components/google-code-prettify/src/prettify.js"></script>
<script src="src/bootstrap-wysiwyg.js"></script>
<script>
$(function()
{
function initToolbarBootstrapBindings()
{
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
'Times New Roman', 'Verdana'],
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function (idx, fontName)
{
fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
});
$('a[title]').tooltip({container:'body'});
$('.dropdown-menu input').click(function() {return false;})
.change(function ()
{
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
}).keydown('esc', function ()
{
this.value='';$(this).change();
});
$('[data-role=magic-overlay]').each(function ()
{
var overlay = $(this), target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
});
if ("onwebkitspeechchange" in document.createElement("input"))
{
var editorOffset = $('#editor').offset();
//$('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
}
else
{
$('#voiceBtn').hide();
}
};
function showErrorAlert (reason, detail)
{
var msg='';
if (reason==='unsupported-file-type')
{
msg = "Unsupported format " + detail;
}
else
{
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
window.prettyPrint && prettyPrint();
});
</script>
</body>
</html>