万普插件库

jQuery插件大全与特效教程

使用monaco editor创建vs code一样的浏览器在线代码编器

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

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


效果图

创建容器

引入javascript文件


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

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


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

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言