monaco-editor使用
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" }); });
5. 2017.7.17 代码有更新,请以下面的样例代码为准
欢迎大家多多交流