Skip to content

Instantly share code, notes, and snippets.

@marcus-at-localhost

marcus-at-localhost/codemirror-sisyphus.html

Last active September 12, 2016 11:33
Show Gist options
  • Save marcus-at-localhost/c640ab1cefc180bd9122a28a1128d155 to your computer and use it in GitHub Desktop.
Save marcus-at-localhost/c640ab1cefc180bd9122a28a1128d155 to your computer and use it in GitHub Desktop.
Download ZIP
Codemirror and Sisyphus.js Example
Raw
codemirror-sisyphus.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CodePen - Codemirror and Sisyphus.js</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/addon/edit/continuelist.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/addon/mode/overlay.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/markdown/markdown.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/gfm/gfm.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/mode/htmlmixed/htmlmixed.min.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.18.2/codemirror.min.css'>
<style>
.CodeMirror {
font-size:12px;
width: 100%;
height: auto;
text-align:left;
border:1px solid #eeeeee;
}
#save-indicator{
display:none;
}
</style>
</head>
<body translate="no" >
<p>
write something and reload the page or close tab. Text should be restored the next time
</p>
<form action="#" method="post">
<textarea id="code" name="code"></textarea>
<hr/>
<input type="reset"/><span id="save-indicator">saved</span>
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/sisyphus/1.1.103/sisyphus.min.js'></script>
<script>
var editor = CodeMirror.fromTextArea(
document.getElementById("code"),
{
mode: 'markdown',
lineNumbers: true,
lineWrapping: true,
theme: "default",
extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
}
);
var s_config = {
customKeySuffix: '',
timeout: 0,
locationBased: true,
autoRelease: true,
onSave: function() {
$('#save-indicator').show().fadeOut(300);
//console.log('save');
},
onRestore: function() {
console.log('restore');
editor.setValue($('#code').val());
},
onRelease: function() {
console.log('release');
// reset/empty out data
editor.setValue('');
},
excludeFields: []
}
$('form').sisyphus(s_config);
// observe changes in codemirror and write them back to the textarea
// trigger a change to trigger sisyphus to save.
editor.on('change',function(cMirror){
var textarea = $('#code');
textarea.val(cMirror.getValue());
textarea.trigger('change');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment