当前位置：网站首页 > 技术文章 > 正文

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

itomcoil 2025-04-24 01:21 13 浏览

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

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

python 浏览器

上一篇：Python奇淫技巧之自动登录哔哩哔哩(解决滑块验证)
下一篇：手把手教你使用ADB卸载手机内置App软件

相关推荐

PS小技巧调整命令，让人物肤色变得更加白皙 #后期修图: 我们来看一下如何去将人物的皮肤变得更加的白皙。·首先选中图层，Ctrl键加J键复制一层。·打开这里的属性面板，选择快速操作删除背景，这样就会将人物进行单独的抠取。·接下来在上方去添加一个黑白调整图层，...

把人物肤色提亮的方法和技巧: PS后期调白肤色提亮照片的方法。一白遮百丑，所以对于Photoshop后期来说把人物肤色调白是一项非常重要的任务。就拿这张素材图片来说，这张素材图片人脸的肤色主要偏红、偏黄，也不够白皙，该怎样对它进行...

《Photoshop教程》把美女图片调成清爽色彩及润肤技巧: 关注PS精品教程，每天不断更新~~室内人物图片一般会偏暗，人物脸部、肤色及背景会出现一些杂点。处理之前需要认真的给人物磨皮及美白，然后再整体润色。最终效果原图一、用修补工具及图章工具简单去除大一点的黑...

PS后期对皮肤进行美白的技巧: PS后期进行皮肤美白的技巧。PS后期对皮肤进行美白的技巧：·打开素材图片之后直接复制原图。·接下来直接点击上方的图像，选择应用图像命令。·在通道这里直接选择红通道，混合这里直接选择柔光，然后点击确定。...

493 [PS调色]调模特通透肤色: 效果对比：效果图吧：1、光位图：2、拍摄参数：·快门：160；光圈：8；ISO：1003、步骤分解图：用曲线调整图层调出基本色调。用可选颜色调整图层调整红色、黄色、白色和灰色4种颜色的混合比例。用色彩...

先选肤色再涂面部，卡戴珊的摄影师透露:为明星拍完照后怎么修图: 据英国媒体12月17日报道，真人秀明星金·卡戴珊终于承认，她把女儿小北P进了家族的圣诞贺卡，怪不得粉丝们都表示这张贺卡照得非常失败。上周，这位39岁的女星遭到了一些粉丝针对这张照片的批评，她于当地时间...

如何在PS中运用曲线复制另一张照片的色调: 怎样把另一张作品的外观感觉，套用到自己的照片上？单靠肉眼来猜，可能很不容易，而来自BenSecret的教学，关键是在PS使用了两个工具，让你可以准确比较两张照片的曝光、色调与饱和度，方便你调整及复制...

PS在LAB模式下调出水嫩肤色的美女: 本PS教程主要使用Photoshop使用LAB模式调出水嫩肤色的美女，教程调色比较独特。作者比较注重图片高光部分的颜色，增加质感及肤色调红润等都是在高光区域完成。尤其在Lab模式下，用高光选区调色后图...

在Photoshop图像后期处理中如何将人物皮肤处理得白皙通透: 我们在人像后期处理中，需要将人物皮肤处理的白皙通透，处理方法很多，大多数都喜欢使用曲线、磨皮等进行调整，可以达到亮但是不透，最终效果往往不是很好，今天就教大家一种如何将任务皮肤处理得白皙通透，希望能帮...

PS调色自学教程:宝宝照片快速调通透，简单实用!: PS调色自学教程：宝宝照片快速调通透。·首先复制图层，然后选择进入ACR滤镜，选择曲线锁定照片的亮部，也就高光位置，其他部位补亮一点，尤其是阴影的部位补亮多一些，让画面的层次均匀一点。·然后回到基本项...

【干货】如何利用PS进行人物美化: 人物图像美化在Photoshop中非常常用，Photoshop作为一款功能强大的图像处理软件，不仅可以对人像进行基本的调色、美化和修复等处理，还可以改变人物的线条和幅度，如调整脸部器官和脸型的大小、调...

教大家一种可以快速把肤色处理均匀的方法@抖音短视频: 快速把肤色处理均匀的方法。今天教大家一种可以快速把肤色处理均匀的方法。像这张照片整体肤色走紫红色，但是局部偏黄缘处理起来非常的麻烦。其实我们只需要新建空白图层，图层混合模式更改为颜色，再选择画笔工具把...

PS调色教程利用RAW调出干净通透的肤色: 要么不发，要么干货。后期教程来噜~用RAW调出干净通透的肤色。这次终于不会原片比PS后好看了吧。如果你依然这么觉得，请不要残忍的告诉我这个事实，泪谢TAT)附送拍摄花絮，感谢各位的支持更多风格请关注m...

photoshop后期皮肤变白的技巧: PS后期皮肤变白的技巧。1.PS后期让皮肤变白的方法有很多种，接下来教你一种非常简单容易上手的方法。2.打开素材图片之后，直接在小太极下拉框的位置添加一个纯色调整图层，颜色设置一个纯白色，点击...

Photoshop调出人物的淡雅粉嫩肤色教程: 本教程主要使用Photoshop调出人物的淡雅粉嫩肤色教程,最终的效果非常的通透迷人,下面让我们一起来学习.出自:86ps效果图：原图：1、打开原图复制一层。2、用Topaz滤镜磨皮(点此下载)。3、...

一周热门

最近发表

首页
收录
顶部