monaco-editor使用
monaco-editor是一款非常好用的web代码编辑器，那么如何把他加到自己的项目中呢。
1.下载插件
npm install [email protected]
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"
});
});
|