monaco-editor是一款非常好用的web代码编辑器,那么如何把他加到自己的项目中呢。
1.下载插件
npm install monaco-editor@0.8.3
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: "<div>我是插入的代码</div>",
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"
});
});