Add a reset sample button

This commit is contained in:
Alex Dima 2019-12-17 16:04:58 +01:00
parent 72321822f4
commit 483a447093
No known key found for this signature in database
GPG key ID: 6E58D7B045760DA0

View file

@ -8,6 +8,7 @@
<body> <body>
<h2>Monaco Editor TypeScript test page</h2> <h2>Monaco Editor TypeScript test page</h2>
<button id="resetBtn">Reset Sample</button>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script> <script>
@ -33,9 +34,8 @@
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script> <script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
<script> <script>
let text = localStorage.getItem("code") function getDefaultCode() {
if (!text) { return [
text = [
'/* Game of Life', '/* Game of Life',
' * Implemented in TypeScript', ' * Implemented in TypeScript',
' * To learn more about TypeScript, please visit http://www.typescriptlang.org/', ' * To learn more about TypeScript, please visit http://www.typescriptlang.org/',
@ -165,10 +165,10 @@
require([ require([
'vs/basic-languages/monaco.contribution', 'vs/basic-languages/monaco.contribution',
'vs/language/typescript/monaco.contribution' 'vs/language/typescript/monaco.contribution'
], function() { ], () => {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(document.getElementById('container'), {
value: text, value: localStorage.getItem("code") || getDefaultCode(),
language: 'typescript', language: 'typescript',
lightbulb: { enabled: true } lightbulb: { enabled: true }
}); });
@ -176,7 +176,11 @@
editor.onDidChangeModelContent(() => { editor.onDidChangeModelContent(() => {
const code = editor.getModel().getValue() const code = editor.getModel().getValue()
localStorage.setItem("code", code) localStorage.setItem("code", code)
}) });
document.getElementById('resetBtn').onclick = () => {
editor.setValue(getDefaultCode());
};
}); });
</script> </script>