Skip to content
Snippets Groups Projects
Commit cd879483 authored by jankeromnes's avatar jankeromnes Committed by Marijn Haverbeke
Browse files

HTML5 preview demo

parent f11e8843
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
demo/preview.html 0 → 100644
+ 75
− 0
View file @ cd879483
<!doctype html>
<html>
<head>
<title>CodeMirror 2: HTML5 preview</title>
<meta charset=utf-8>
<script src=../lib/codemirror.js></script>
<script src=../mode/xml/xml.js></script>
<script src=../mode/javascript/javascript.js></script>
<script src=../mode/css/css.js></script>
<script src=../mode/htmlmixed/htmlmixed.js></script>
<link rel=stylesheet href=../lib/codemirror.css>
<link rel=stylesheet href=../theme/default.css>
<link rel=stylesheet href=../css/docs.css>
<style type=text/css>
.CodeMirror {
float: left;
width: 50%;
border: 1px solid black;
}
iframe {
width: 49%;
float: left;
height: 300px;
border: 1px solid black;
border-left: 0px;
}
</style>
</head>
<body>
<h1>CodeMirror 2: HTML5 preview</h1>
<textarea id=code name=code>
<!doctype html>
<html>
<head>
<title>HTML5 canvas demo</title>
<meta charset=utf-8>
</head>
<body>
<canvas id=tutorial width=250 height=250></canvas>
<script>
var canvas = document.getElementById('tutorial');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(250,0,0)';
context.fillRect(10, 10, 55, 50);
context.fillStyle = 'rgba(0, 0, 250, 0.5)';
context.fillRect(30, 30, 55, 50);
</script>
</body>
</html>
</textarea>
<iframe id=preview></iframe>
<script>
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html',
tabMode: 'indent',
onChange: function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
}
});
function updatePreview() {
var preview = document.getElementById('preview').contentDocument;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
</script>
</body>
</html>
index.html
+ 1
− 0
View file @ cd879483
......@@ -61,6 +61,7 @@
<li><a href="demo/complete.html">Autocompletion</a></li>
<li><a href="demo/mustache.html">Mode overlays</a></li>
<li><a href="demo/search.html">Search/replace</a></li>
<li><a href="demo/preview.html">HTML editor with preview</a></li>
<li><a href="demo/resize.html">Auto-resizing editor</a></li>
<li><a href="demo/marker.html">Setting breakpoints</a></li>
<li><a href="demo/activeline.html">Highlighting the current line</a></li>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment