monacmonaco-editor使用

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

1.下载插件

npm install monaco-editor@0.8.3

2.编辑器值的初始化

<!--要绑定的对象-->                      <           p                       id="container"></           p           >

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:            "<p>我是插入代码</p>"           ,                                  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"                                  });                                  });