CodeMirror Playground

Stackoverflow question.

by Jack Wootton

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="editor"></div>
<hr />
<div id="n"></div>
<div id="clean"></div>
<div id="match"></div>
<hr />
<div id="out"></div>

CSS

body, html {
    padding: 15px;
}

#editor {
    border: 1px solid #DDD
}

.marked-text {
    /* background: red;     */
}

JavaScript

var startingValue = "foo";

var cm = CodeMirror(document.getElementById("editor"), {
    value: startingValue,
    mode: "text",
    lineNumbers: true
});

var changeNumber = cm.changeGeneration(false);

cm.on('changes', (cm, change) => {
	var value = cm.getValue();
	$('#out').prepend(value + '<br />');
	$('#clean').text('Codemirror Clean? ' + cm.isClean(changeNumber));
	$('#match').text('Matches original? ' + (value == startingValue));
});

 
$('#n').text('Change generation number: ' + changeNumber);