monacmonaco-editor使用

monaco-editor使用

 

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

1.下载插件

npm install [email protected]

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:  "我是插入的代码" ,
        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:  'nenewnew' ,
                language:  'html' ,
                wrappingColumn: 0,
                wrappingIndent:  "indent"
            });
        });