網頁版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

 

　　暫時只有這些，后面有好的想法再寫