程序员文章、书籍推荐和程序员创业信息与资源分享平台

网站首页 > 技术文章 正文

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

hfteth 2025-03-01 14:05:42 技术文章 26 ℃

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


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

最近发表
标签列表