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"              });          });