mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 17:25:39 +01:00
73 lines
1.7 KiB
HTML
73 lines
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" />
|
|
</head>
|
|
<body>
|
|
<h2>Monaco Diff Editor Sample</h2>
|
|
<div
|
|
id="container"
|
|
style="width: 800px; height: 600px; border: 1px solid grey"
|
|
></div>
|
|
|
|
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
|
|
<script>
|
|
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
|
|
|
|
require(['vs/editor/editor.main'], function () {
|
|
var diffEditor = monaco.editor.createDiffEditor(
|
|
document.getElementById('container')
|
|
);
|
|
|
|
Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function (
|
|
r
|
|
) {
|
|
var originalTxt = r[0].responseText;
|
|
var modifiedTxt = r[1].responseText;
|
|
|
|
diffEditor.setModel({
|
|
original: monaco.editor.createModel(originalTxt, 'javascript'),
|
|
modified: monaco.editor.createModel(modifiedTxt, 'javascript')
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
function xhr(url) {
|
|
var req = null;
|
|
return new Promise(
|
|
function (c, e) {
|
|
req = new XMLHttpRequest();
|
|
req.onreadystatechange = function () {
|
|
if (req._canceled) {
|
|
return;
|
|
}
|
|
|
|
if (req.readyState === 4) {
|
|
if (
|
|
(req.status >= 200 && req.status < 300) ||
|
|
req.status === 1223
|
|
) {
|
|
c(req);
|
|
} else {
|
|
e(req);
|
|
}
|
|
req.onreadystatechange = function () {};
|
|
}
|
|
};
|
|
|
|
req.open('GET', url, true);
|
|
req.responseType = '';
|
|
|
|
req.send(null);
|
|
},
|
|
function () {
|
|
req._canceled = true;
|
|
req.abort();
|
|
}
|
|
);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|