<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <link

      rel="stylesheet"

      data-name="vs/editor/editor.main"

      href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"

    />

    <style>

      html,

      body {

        position: relative;

        padding: 0;

        margin: 0;

        height: 100vh;

        width: 100vw;

        overflow: hidden;

      }

    </style>

  </head>

  <body>

    <script>

      var require = {

        paths: { vs: "../node_modules/monaco-editor/min/vs" },

        "vs/nls": { availableLanguages: { "*": "zh-cn" } },

      };

    </script>

    <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>

    <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>

    <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.zh-cn.js"></script>

    <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>

    <script>

      var editor = monaco.editor.create(document.body, {

        value: "// monaco editor example",

        language: "javascript",

        theme: "vs-dark",

      });

      let offset = 0;

      let codeStr = `

import monaco from "monaco-editor";

var editor = monaco.editor.create(document.body, {

  value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join(

    "\\n"

  ),

  language: "javascript",

});

`;

      let id = setInterval(() => {

        const oldValue = editor.getValue();

        const addValue = codeStr[offset++];

        editor.setPosition(new monaco.Position(0, 0));

        if (addValue === undefined) {

          clearInterval(id);

          return;

        }

        editor.setValue(oldValue + addValue);

      }, 60);

    </script>

  </body>

</html>

See also:

js 在浏览器中使用 monaco editor的更多相关文章

  1. Elasticsearch.js 发布 —— 在Node.js和浏览器中调用Elasticsearch（1）

    继PHP.Ruby.Python和Perl之后,Elasticsearch最近发布了Elasticsearch.js,Elasticsearch的JavaScript客户端库.可以在Node.js和浏 ...

  2. Elasticsearch.js 发布 —— 在Node.js和浏览器中调用Elasticsearch

    继PHP.Ruby.Python和Perl之后,Elasticsearch最近发布了Elasticsearch.js,Elasticsearch的JavaScript客户端库.可以在Node.js和浏 ...

  3. js 在浏览器中的event loop事件队列

    目录 前言 认识一个栈两个队列 执行过程 异步任务怎么分配 简单例子 难一点的例子 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其 ...

  4. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  5. JS 检测浏览器中是否安装了特定的插件

    1.检测非IE浏览器 可以使用plugins数组来达到这个目的,例: //检测插件(在IE中无效) function hasPlugin(name){ name = name.toLowerCase( ...

  6. js检测浏览器中是否安装了flash播放插件

    这两天工作中需要在网页中嵌入flash小游戏,我使用的是swfobject.js version:1.5.其他方面都很好,唯独版本检测这里一直没有搞通,后来实在无奈之下,改用js来检测浏览器的flas ...

  7. 从高德采集最新的省市区三级坐标和行政区域边界，用js在浏览器中运行

    本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>中省市区三级的坐标和行政区域边界的采集. 本文更新(移步查阅): ...

  8. 从统计局采集最新的省市区镇数据，用js在浏览器中运行 V2

    本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>的采集. 相对于用于和采集2016版.2017版的js代码做了比 ...

  9. 极其简单的用JS在浏览器中创建下载文件的方法

    有这样一个需求,在js中动态创建一个页面,然后下载该页面为word文档,研究了一上午,最后发现实现起来如此简单. 在js中创建如下方法:(直接复制即可) function downloadFile(f ...

随机推荐

  1. BigDecimal add方法问题：调用add后，求和结果没变

    import java.math.BigDecimal; public class DecimalAdd { public static void main(String[] args) { BigD ...

  2. Linux的.a、.so和.o文件 windows下obj,lib,dll,exe的关系 动态库内存管理 动态链接库搜索顺序 符号解析和绑定 strlen函数的汇编实现分析

    Linux的.a..so和.o文件 - chlele0105的专栏 - CSDN博客 https://blog.csdn.net/chlele0105/article/details/23691147 ...

  3. .Net框架的概念和运行原理

    原文 https://blog.csdn.net/WandDouDou/article/details/80678449

  4. ASP.NET Core 5.0 MVC中的视图分类——布局视图、启动视图、具体视图、分部视图

    一.创建MVC应用程序 创建后的项目 二.(全局性)启动视图 _ViewStart.cshtml 顾名思义,就是在View开始执行之前执行,而且是每一个View, 它的预设内容是 @{ Layout ...

  5. mapreduce编程练习（二）倒排索引 Combiner的使用以及练习

    问题一:请使用利用Combiner的方式:根据图示内容编写maprdeuce程序 示例程序 package com.greate.learn; import java.io.IOException; ...

  6. python模块----optparse模块、argparse模块 （命令行解析模块）

    简介 optparse module---自版本3.2以来已弃用:optparse模块已弃用,将不再进一步开发:将继续使用argparse模块进行开发.optparse使用一种更具声明性的命令行解析方 ...

  7. python--基础1（pip，虚拟环境、python编写规范）

    python简介 1.Python是一种解释型脚本语言; 2.Python在设计上坚持了清晰划一的风格,这使得Python成为一门易读.易维护,并且被大量用户所欢迎的.用途广泛的语言; 3.pytho ...

  8. 33.vsftpd服务程序--本地用户模式

    1.针对本地用户模式的权限参数以及作用如下 [root@localhost ~]# vim /etc/vsftpd/vsftpd.conf 1 anonymous_enable=NO 2 local_ ...

  9. docker（12）使用Dockerfile创建jenkins+python3+pytest环境

    前言 之前我们用docker手动安装了jenkins环境,在jenkins中又安装了python3环境和各种安装包,如果我们想要在其他3台机器上安装,又是重复操作,重复劳动,那会显得很low,这里可以 ...

  10. CF-1451 E Bitwise Queries 异或 交互题

    E - Bitwise Queries 传送门 题意 有一组序列,长度为 \(n(4\le n \le 2^{16})\),且 \(n\) 为 2 的整数次幂,序列中数值范围为 [0,n-1], 每次 ...