如何在纯h5环境中使用monaco-editor diff
2020-08-11 本文已影响0人
骚包霸天虎
monaco-editor 是微软官方出品的一个编辑器插件，看图就知道有多炸天。
image.png
image.png
话不多说，上代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>monaco editor</title>
<link rel="stylesheet" data-name="vs/editor/editor.main"
href="package/min/vs/editor/editor.main.css">
</head>
<body style="background-color: rgb(140, 190, 190);">
<h1>monaco editor</h1>
<div id="monaco_editor" style="height:400px">
</div>
<script>
var require = {
paths: {
'vs': 'package/min/vs'
}
};
</script>
<script src="package/min/vs/loader.js"></script>
<script src="package/min/vs/editor/editor.main.nls.js"></script>
<script src="package/min/vs/editor/editor.main.js"></script>
<script>
var h_div = document.getElementById('monaco_editor');
var diffEditor = monaco.editor.createDiffEditor(h_div, {
theme: 'vs-dark'
});
var originalModel = monaco.editor.createModel("heLLo world!", "text/plain");
var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain");
diffEditor.setModel({
original: originalModel, //原版内容
modified: modifiedModel //修改的内容
})
</script>
</body>
</html>
