在现代Web应用环境中，在线代码编辑器，已逐渐成为不可缺的工具了，Monaco Editor是微软开源的一款web版代码编辑器。它支持智能提示、代码高亮、代码格式化、多种编程语言，并且可以自定义主题和插件。

上次我们提到，可以通过npm方式来使用。但是有些项目，我们需要直接引用怎么办？

效果图

创建容器

<div class="form-control" id="editor_event_body" style="height:500px;"></div>

引入javascript文件

<script src="https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.37.1/min/vs/loader.min.js"></script>
<script>
  require.config({ paths: { 'vs': 'https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.37.1/min/vs' }});
</script>

您也可以访问官网地址，下载发布的版本，然后本地应用。

https://microsoft.github.io/monaco-editor/

创建编辑器实例

(function(){
  let editor;
  require(['vs/editor/editor.main'], function() {
     editor = monaco.editor.create(document.getElementById('editor'), {
          value: 'function hello() {\n\talert("Hello world!");\n}',
          language: 'javascript'
      });
  });
})();

代码获取与设置

// 获取
const content = editor.getValue();
// 设置
editor.setValue('function hello() {\n\talert("Hello world!");\n}');

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。