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

 

版权声明：本文为ronon77原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。