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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Controlgroup - Toolbar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<link rel="stylesheet" href="../demos.css">
<style>
#zoom-button {
width: 55px;
}
#fontname-button,
#fontsize-button {
width: 45px;
}
#forecolor-button {
width: 50px;
}
#hilitecolor-button {
width: 70px;
}
#bold {
font-weight: bold;
}
#italic {
font-style: italic;
}
#underline {
text-decoration: underline;
}
.toolbar {
font-size: .75em;
}
#page {
width: 440px;
left: 50%;
position: relative;
margin-left: -226px;
height: 450px;
border: 1px solid #888;
box-shadow: 7px 7px 3px #ccc;
font-size: 11px;
font-family: "Lucida Grande";
zoom: 100%;
padding: 5px;
white-space: pre-line;
overflow: scroll;
}
.wrap {
width: 588px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="button checkboxradio selectmenu">
var page = $( "#page" );
var basicControls = [ "#print", "#bold", "#italic", "#undo", "#redo" ];
var valueControls = [ "#fontsize", "#forecolor", "#hilitecolor", "#backcolor", "fontname" ];
$( "#print" ).button({
"icon": "ui-icon-print",
"showLabel": false
});
$( "#redo" ).button({
"icon": "ui-icon-arrowreturnthick-1-e",
"showLabel": false
});
$( "#undo" ).button({
"icon": "ui-icon-arrowreturnthick-1-w",
"showLabel": false
});
$( ".toolbar" ).controlgroup();
$( "#zoom" ).on( "selectmenuchange", function() {
page.css({ "zoom": $( this ).val() });
})
$( basicControls.concat( valueControls ).join( ", " ) ).on( "click change selectmenuchange",
function() {
document.execCommand(
this.id,
false,
$( this ).val()
);
} );
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
});
</script>
</head>
<body>
<div class="wrap">
<div class="toolbar">
<button id="print">Print</button>
<button id="undo">Undo</button>
<button id="redo">Redo</button>
<select id="zoom">
<option selected disabled>Zoom</option>
<option>50%</option>
<option>75%</option>
<option>90%</option>
<option>100%</option>
<option>125%</option>
<option>150%</option>
<option>200%</option>
</select>
<select id="fontname">
<option selected disabled>Font</option>
<option>Arial</option>
<option>Comic Sans MS</option>
<option>Courier New</option>
<option>Georgia</option>
<option>Impact</option>
<option>Lucida Grande</option>
<option>Times New Roman</option>
<option>Verdana</option>
</select>
<select id="fontsize">
<option selected disabled>Size</option>
<option value="1">8px</option>
<option value="2">9px</option>
<option value="3">10px</option>
<option value="4">11px</option>
<option value="5">12px</option>
<option value="6">14px</option>
<option value="7">18px</option>
<option value="8">24px</option>
<option value="9">30px</option>
<option value="10">36px</option>
</select>
<select id="hilitecolor" title="Background color">
<option selected disabled>Highlight</option>
<option value="white">None</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="grey">Grey</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
</select>
<select id="forecolor" title="Color">
<option selected disabled>Color</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="#ccc">Grey</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
</select>
<button id="bold">B</button>
<button id="italic">I</button>
<button id="underline">U</button>
</div>
<pre id="page" contenteditable="true">
The Rime of the Ancient Mariner (text of 1834)
BY SAMUEL TAYLOR COLERIDGE
Argument
How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and
of the strange things that befell; and in what manner the Ancyent Marinere came back to his own
Country.
PART I
It is an ancient Mariner,
And he stoppeth one of three.
'By thy long grey beard and glittering eye,
Now wherefore stopp'st thou me?
The Bridegroom's doors are opened wide,
And I am next of kin;
The guests are met, the feast is set:
May'st hear the merry din.'
He holds him with his skinny hand,
'There was a ship,' quoth he.
'Hold off! unhand me, grey-beard loon!'
Eftsoons his hand dropt he.
He holds him with his glittering eye—
The Wedding-Guest stood still,
And listens like a three years' child:
The Mariner hath his will.
The Wedding-Guest sat on a stone:
He cannot choose but hear;
And thus spake on that ancient man,
The bright-eyed Mariner.
'The ship was cheered, the harbour cleared,
Merrily did we drop
Below the kirk, below the hill,
Below the lighthouse top.
The Sun came up upon the left,
Out of the sea came he!
And he shone bright, and on the right
Went down into the sea.
Higher and higher every day,
Till over the mast at noon—'
The Wedding-Guest here beat his breast,
For he heard the loud bassoon.
The bride hath paced into the hall,
Red as a rose is she;
Nodding their heads before her goes
The merry minstrelsy.
The Wedding-Guest he beat his breast,
Yet he cannot choose but hear;
And thus spake on that ancient man,
The bright-eyed Mariner.
And now the STORM-BLAST came, and he
Was tyrannous and strong:
He struck with his o'ertaking wings,
And chased us south along.
With sloping masts and dipping prow,
As who pursued with yell and blow
Still treads the shadow of his foe,
And forward bends his head,
The ship drove fast, loud roared the blast,
And southward aye we fled.
And now there came both mist and snow,
And it grew wondrous cold:
And ice, mast-high, came floating by,
As green as emerald.
And through the drifts the snowy clifts
Did send a dismal sheen:
Nor shapes of men nor beasts we ken—
The ice was all between.
The ice was here, the ice was there,
The ice was all around:
It cracked and growled, and roared and howled,
Like noises in a swound!
At length did cross an Albatross,
Thorough the fog it came;
As if it had been a Christian soul,
We hailed it in God's name.
It ate the food it ne'er had eat,
And round and round it flew.
The ice did split with a thunder-fit;
The helmsman steered us through!
And a good south wind sprung up behind;
The Albatross did follow,
And every day, for food or play,
Came to the mariner's hollo!
In mist or cloud, on mast or shroud,
It perched for vespers nine;
Whiles all the night, through fog-smoke white,
Glimmered the white Moon-shine.'
'God save thee, ancient Mariner!
From the fiends, that plague thee thus!—
Why look'st thou so?'—With my cross-bow
I shot the ALBATROSS.
</pre>
</div>
<div class="demo-description">
<p>A sample editor toolbar</p>
<p>Highlight text and edit it using the buttons and dropdowns in the toolbar.</p>
<p class="warning">Remember: This is only a demo and shouldn't be used for anything in production. Use a proper editor like <a href="http://prosemirror.net/">ProseMirror</a> instead.
</div>
</body>
</html>
|
