monacmonaco-editor使用

monaco-editor使用

 

monaco-editor是一款非常好用的web代码编辑器，那么如何把他加到自己的项目中呢。

1.下载插件

npm install monaco-editor@0.8.3

2.初始化编辑器值

1 2	<!--要绑定的对象--> <div id="container"></div>

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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.获取编辑器值

1	monacoEditor.getValue();

4.替换编辑器值

1 2 3 4 5 6 7 8 9 10 11

//移除原有对象 $("#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"             });         });