如何在纯h5环境中使用monaco-editor diff

monaco-editor 是微软官方出品的一个编辑器插件，看图就知道有多炸天。

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>