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

2017.7.17 版本有更新,代码有变动,请以下面的的代码为准

效果预览

代码下载

最新文章

  1. Xcode 锁终端
  2. Mysql的用户名密码设置方法
  3. python——django的post请求
  4. python字符串的编码格式
  5. &lt;img&gt; to image_tag
  6. 用Git进行协同开发
  7. SAP-SD-ABAP-VMOD 查找和应用SD模块用户出口(user exit) 好方法 .
  8. hadoop的thriftserver配置
  9. Spring 3.x 读书笔记
  10. 【BZOJ3529】【SDOI2014】数表
  11. ROS_Kinetic_05 ROS基础内容(二)
  12. JIRA API 对接
  13. [OC] 富文本 AttributedString 以及 用富文本解析html文本
  14. 20165306 Exp2 后门原理与实践
  15. 爬虫之进阶 基于twisted实现自制简易scrapy框架(便于对scrapy源码的理解)
  16. JavaScript的 sourcemap 的理解
  17. oracle参数文件与启动过程
  18. CMD下的netstat命令
  19. resteasy经验谈
  20. HDU1349 Minimum Inversion Number 2016-09-15 13:04 75人阅读 评论(0) 收藏

热门文章

  1. HDU - 4725_The Shortest Path in Nya Graph
  2. 数据人看Feed流-架构实践
  3. 17.使用android_studio开发libgdx
  4. jQuery show hide方法 二级菜单
  5. SQL注入原理讲解,很不错!
  6. MySQL_分库分表
  7. BT17破解软件
  8. CNN如何识别一幅图像中的物体
  9. HZOJ 匹配
  10. Jmeter正则表达式提取多个值示例