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

作者: 骚包霸天虎 | 来源:发表于2020-08-11 14:47 被阅读0次

如何在纯h5环境中使用monaco-editor diff
vue中使用monaco-editor 和 prettier
在线编辑器
微信公众号H5支付（前端部分）笔记
10s带你配置git冲突（conflict）处理神器——diff
diff和patch配合打补丁
postman的环境
微信h5支付流程图
diff命令和patch命令的使用
Vue原理「十二」-- vdom和diff算法 *****

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

image.png

monaco-editor下载地址

话不多说，上代码。

<!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>