码迷,mamicode.com
首页 > 其他好文 > 详细

monaco-editor使用

时间:2017-05-30 17:57:12      阅读:800      评论:0      收藏:0      [点我收藏+]

标签:href   javascrip   size   targe   remove   ref   func   indent   require   

monaco-editor是非常好用的一款online edit plus,那么如何把他加到自己的项目中呢。

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(‘editcode‘), { value: htmlFormat(eText), language: ‘html‘, wrappingColumn: 0, wrappingIndent: "indent" }); });

  

monaco-editor使用

标签:href   javascrip   size   targe   remove   ref   func   indent   require   

原文地址:http://www.cnblogs.com/shihao316558512/p/6920386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!