monaco-yaml/test/index.html
2018-03-27 11:34:01 +08:00

63 lines
No EOL
1.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css">
</head>
<body>
<h2>Monaco Editor JSON test page</h2>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script>
// Loading basic-languages to get the json language definition
var require = {
paths: {
'vs/basic-languages': '../node_modules/monaco-languages/release',
'vs/languages/yaml': '../release/dev',
'vs': '../node_modules/monaco-editor-core/dev/vs'
}
};
</script>
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
<script>
require([
'vs/basic-languages/src/monaco.contribution',
'vs/languages/yaml/monaco.contribution'
], function() {
monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
validate: true,
schemas: [{
fileMatch: ['*'],
schema: {
title: 'Person',
type: 'object',
properties: {
name: { type: 'string' },
age: {
description: 'Age in years',
type: 'integer',
minimum: 0
}
},
required: ['name']
}
}]
});
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'name: Apple',
'age: 18.0'
].join('\n'),
language: 'yaml'
});
});
</script>
</body>
</html>