0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 15:23:29 -05:00

Final Copy of Version1.0

This commit is contained in:
Matthew Borden 2014-07-11 18:52:17 +10:00
parent 9687fb9cb2
commit 82b600874b
3 changed files with 95 additions and 14 deletions

View file

@ -7,27 +7,80 @@
<!--[if IE 8]>
<script type="text/javascript" src="build/ie8.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="build/Squire-UI.css" rel="stylesheet" type="text/css" />
<link href="build/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="build/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="build/jQuery/jQuery.js" type="text/javascript"></script>
<script src="build/squire-raw.js" type="text/javascript"></script>
<script src="build/Squire-UI.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
UI = new SquireUI({replace: 'textarea#foo', height: 700});
UI = new SquireUI({replace: 'textarea#foo', height: 300});
});
</script>
</head>
<body>
<h1>HTML Editor Test</h1>
<header class="header">
<div class="wrapper">
<h1>Squire</h1>
<h2>The Rich Text Editor the internet needs.</h2>
<h2>the textarea of the future</h2>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-centered">
<textarea id="foo"></textarea>
</div>
</div>
<div class="row">
<div class="col-centered">
<h1>About</h1>
<p>Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible. It is built for the present and the future, and as such does not support truly ancient browsers. It should work fine back to around Opera 10, Firefox 3.5, Safari 4, Chrome 9 and IE8.
</p>
<p>Unlike other HTML5 rich text editors, Squire was written as a component for writing documents (emails, essays, etc.), not doing wysiwyg websites. If you are looking for support for inserting form controls or flash components or the like, you'll need to look elsewhere. However for many purposes, Squire may be just what you need, providing the power without the bloat.</p>
</div>
</div>
<div class="row">
<div class="col-centered">
<h1>Installation</h1>
<ol>
<li>Download the source from <a href="https://github.com/neilj/Squire">neilj/Squire</a></li>
<li>Copy the contents of the <code>build/</code> directory onto your
server.</li>
<li>Edit the <code>&lt;style&gt;</code> block in document.html to add the
default styles you would like the editor to use (or link to an external
stylesheet).</li>
<li>In your application, instead of a <code>&lt;textarea&gt;</code>, use an
<code>&lt;iframe src="path/to/document.html"&gt;</code>.</li>
<li>In your JS, attach an event listener to the <code>load</code> event of
the iframe. When this fires you can grab a reference to the editor object
through <code>iframe.contentWindow.editor</code>.</li>
<li>Use the API below with the <code>editor</code> object to set and get
data and integrate with your application or framework.</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-centered">
<hr>
<p class="alignCenter">Made with <i class="fa fa-heart"></i> at <a href="https://www.fastmail.fm/">FastMail</a></p>
</div>
</div>
</div>
</body>
</html>

View file

@ -5,7 +5,7 @@ all: build ui
clean:
rm -rf build
ui: build/Squire-UI.html build/Squire-UI.css build/Squire-UI.js fonts jQuery
ui: build/Squire-UI.html build/Squire-UI.css build/Squire-UI.js fonts jQuery bootstrap
build: build/ie8.js build/squire.js build/document.html

View file

@ -1,10 +1,38 @@
body {
position: relative;
margin: 0;
font-family: 'Lato', sans-serif !important;
}
.header {
padding: 50px 0 30px;
color: #fff;
text-align: center;
background: #1d193d;
margin-bottom: 20px;
}
.header h1 {
font-size: 8em;
line-height: 1em;
font-weight: 900;
}
.header h2 {
margin-bottom: 1em;
font-size: 3em;
font-weight: 300;
text-transform: lowercase;
color: #afaedf;
}
.col-centered{
float: none;
margin: 0 auto;
padding: 50px;
width: 70%;
font: 400 14px/1.24 helvetica, arial, sans-serif;
text-shadow: 0 1px 0 white;
width: 80%;
}
.alignCenter {
text-align: center;
}
iframe {