/instantMessage/node_modules/jquery-ui/demos/controlgroup/toolbar.html |
@@ -0,0 +1,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> |