Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (71 sloc) 1.9 KB
<!doctype html>
<meta charset="utf-8" />
<title>CodeMirror Movie</title>
<link rel="stylesheet" href="./node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="./lib/movie.css">
<script src="./node_modules/codemirror/lib/codemirror.js"></script>
<script src="./node_modules/codemirror/mode/css/css.js"></script>
<script src="./node_modules/codemirror/mode/xml/xml.js"></script>
<script src="./dist/movie.js"></script>
<style type="text/css">
.CodeMirror {
font-size: 12px;
/* background: #f5f5f5; */
border: 1px solid #e3e3e3;
<h1>CodeMirror Movie</h1>
In textarea, separate initial editor content and movie scenario
with @@@ separator.
Use | character to indicate initial caret position
<textarea id="code" name="code">
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
# Lines started with # sign are comments and ignored by movie parser
prompt: Hello world
# Use ::: separator to create outline item for current action
type: Hello world ::: Typing “Hello world”
wait: 1000
# Passing command options as JS object
tooltip: {text: "Sample tooltip", wait: 2000}
wait: 600
# Perform CodeMirror pre-defined command
run: {command: "goWordLeft", times: 2} ::: Move word left
<button style="font-size: 2em;margin: 10px auto;display: block;">Play</button>
var movie ='code');
// Create simple UI to interact with movie
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
if (movie.state == 'play') {
this.innerHTML = 'Play';
} else {;
this.innerHTML = 'Pause';
// Listen to events to change UI state
movie.on('stop', function(name) {
btn.innerHTML = 'Play';