Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 07:13:08 -05:00
Code Issues Activity

Use advanced init mode for Demo.html

Browse source 
So it works in Chrome on the local file system (the iframe loading method runs
afoul of security restrictions).
This commit is contained in:
Neil Jenkins 2015-04-08 18:34:51 +07:00
parent 7db0ae059a
commit 62e2f5aa95
1 changed files with 100 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
Demo.html
View file

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>HTML Editor Test</title>
<style type="text/css" media="screen">
body {
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>HTML Editor Test</title>
<style type="text/css" media="screen">
body {
position: relative;
margin: 0 auto;
padding: 50px;
@ -16,30 +16,19 @@
h1 {
font-size: 1.95em;
}
iframe {
border: 1px solid #888;
}
span {
cursor: pointer;
text-decoration: underline;
}
p {
margin: 5px 0;
}
</style>
<script type="text/javascript" charset="utf-8">
var editor;
document.addEventListener( 'click', function ( e ) {
var id = e.target.id,
value;
if ( id && editor && editor[ id ] ) {
if ( e.target.className === 'prompt' ) {
value = prompt( 'Value:' );
}
editor[ id ]( value );
}
}, false );
</script>
span {
cursor: pointer;
text-decoration: underline;
}
p {
margin: 5px 0;
}
iframe {
border: 1px solid #888;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>HTML Editor Test</h1>
@ -78,6 +67,87 @@
<span id="redo">Redo</span>
</p>
</header>
<iframe src="build/document.html" onload="top.editor=this.contentWindow.editor" width="500" height="500"></iframe>
<script type="text/template" id="editorStyles">
html {
height: 100%;
}
body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding: 1em;
background: transparent;
color: #2b2b2b;
font: 13px/1.35 Helvetica, arial, sans-serif;
cursor: text;
}
a {
text-decoration: underline;
}
h1 {
font-size: 138.5%;
}
h2 {
font-size: 123.1%;
}
h3 {
font-size: 108%;
}
h1,h2,h3,p {
margin: 1em 0;
}
h4,h5,h6 {
margin: 0;
}
ul, ol {
margin: 0 1em;
padding: 0 1em;
}
blockquote {
border-left: 2px solid blue;
margin: 0;
padding: 0 10px;
}
</script>
<script type="text/javascript" src="build/squire-raw.js"></script>
<script type="text/javascript" charset="utf-8">
var editor;
var iframe = document.createElement( 'iframe' );
iframe.addEventListener( 'load', function () {
// Make sure we're in standards mode.
var doc = iframe.contentDocument;
if ( doc.compatMode !== 'CSS1Compat' ) {
doc.open();
doc.write( '<!DOCTYPE html><title></title>' );
doc.close();
}
// doc.close() can cause a re-entrant load event in some browsers,
// such as IE9.
if ( editor ) {
return;
}
// Create Squire instance
editor = new Squire( doc );
// Add styles to frame
var style = doc.createElement( 'style' );
style.type = 'text/css';
style.textContent = document.getElementById( 'editorStyles' ).textContent;
doc.querySelector( 'head' ).appendChild( style );
}, false );
document.body.appendChild( iframe );
document.addEventListener( 'click', function ( e ) {
var id = e.target.id,
value;
if ( id && editor && editor[ id ] ) {
if ( e.target.className === 'prompt' ) {
value = prompt( 'Value:' );
}
editor[ id ]( value );
}
}, false );
</script>
</body>
</html>