网页版vscode插件（Monaco Editor），非常好用的代码编辑器插件

　下载链接

         https://microsoft.github.io/monaco-editor/

　API文档链接

        https://microsoft.github.io/monaco-editor/api/index.html

　　如何编辑器使用

　　nodejs开发环境的使用  $ npm install monaco-editor 进行安装，下载链接中有

　　下载完成后会获取如下的文件列表：

 　　将 dev 目录复制到你的项目中

　　在页面中引用 loder.js 如下：

<script src="../../../lib/editorlib/editor/vs/loader.js"></script>

　　js初始化如下：

require.config({
        paths: {
            'vs': '../../lib/editorlib/editor/vs'
        },
        'vs/nls': {
            availableLanguages: {
                '*': 'zh-cn'
            }
        }
    });

    require(['vs/editor/editor.main'], function () {
        editor = monaco.editor.create(document.getElementById('editor'), {
            // autoIndent: true,
            value: '',
            language: 'html',//默认html语言
            contextmenu: true,
            theme: 'vs-dark',
            automaticLayout: true,
            EditorMinimapOptions: {
                enabled: false
            },
        });
    });

　　编辑器的内容设置与获取

editor.getValue();//获取编辑器内容

//如果内容是非html格式，需要设置编辑器语音类型
editor.setValue("");//设置编辑器内容

　　动态设置语言

　　初始化默认的是html，在进行编辑时会提示html的代码补全信息。如何切换到js语言模式如下：

monaco.languages.register({id: 'javascript'});

var language = monaco.editor.createModel(null, 'javascript');

editor.setModel(language);

　　如何识别编辑器中的内容是否更改

　　编辑器本身是没有这个功能，我们可以利用编辑器的 onDidChangeModelContent 事件对编辑器进行监听，间接实现识别内容是否更改功能。代码如下：

var editorContentVersionId = 0;//编辑历史版本id
var editorContentPageVersionId = 0;//编辑器的当前版本id
require(['vs/editor/editor.main'], function () {
        editor = monaco.editor.create(document.getElementById('editor'), {
            // autoIndent: true,
            value: '',
            language: 'html',
            contextmenu: true,
            theme: 'vs-dark',
            automaticLayout: true,
            EditorMinimapOptions: {
                enabled: false
            },
        });

        editor.onDidChangeModelContent(function (e) {
            editorContentPageVersionId = e.versionId;
            // console.log(editorContentVersionId,editorContentPageVersionId)
        });

    });

//检测编辑器是变更内容
var checkEditorContent = function () {
    if (editorContentVersionId == 0 || editorContentVersionId == editorContentPageVersionId) {
        return true;
    }
    return false;
}

//已当前版本为基准判断是否变更
var resetEditorContentVersion = function () {
    editorContentVersionId = editorContentPageVersionId;
}

　　有个小缺陷，就是将修改的内容还原之后还是会判定为已修改

　　最后分享下我在公司开发的项目：

　　https://www.esmap.cn/onlinedev/content/editor/index/index.html

　　暂时只有这些，后面有好的想法再写