monaco-editor使用

monaco-editor是一款非常好用的web代碼編輯器，那么如何把他加到自己的項目中呢。

1.下載插件

npm install monaco-editor@0.8.3

2.初始化編輯器值

<!--要綁定的對象-->
<div id="container"></div>

　　

var monacoEditor;
//設置插件路徑
require.config({ paths: { 'vs': '/Scripts/monaco/min/vs' } });
//綁定對象並賦值
require(['vs/editor/editor.main'], function () {
	//container為要綁定的對象
	monacoEditor = monaco.editor.create(document.getElementById('container'), {
		value: "<div>我是插入的代碼</div>",
		language: 'html',
		wrappingColumn: 0,
		wrappingIndent: "indent"
	});
});
//自適應寬度
window.onresize = function () {
	if (monacoEditor) {
		monacoEditor.layout();
	}
};

3.獲取編輯器值

monacoEditor.getValue();

4.替換編輯器值

//移除原有對象
$("#container").children().remove();
//重新綁定對象並賦新值
require(['vs/editor/editor.main'], function () {
            monacoEditor = monaco.editor.create(document.getElementById('container'), {
                value: '<span>nenewnew</span>',
                language: 'html',
                wrappingColumn: 0,
                wrappingIndent: "indent"
            });
        });

 

2017.7.17 版本有更新，代碼有變動，請以下面的的代碼為准

效果預覽

代碼下載