<!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. 使用JWT创建安全的ASP.NET Core Web API

    在本文中,你将学习如何在ASP.NET Core Web API中使用JWT身份验证.我将在编写代码时逐步简化.我们将构建两个终结点,一个用于客户登录,另一个用于获取客户订单.这些api将连接到在本地 ...

  2. 网络流 - dinic + 当前弧优化【代码】

    这是初学网络流的时候从<算法竞赛进阶指南>抄下来的一份代码,自己理解的也不是很透彻. 注意,边要从 \(1\) 开始计,不然直接 \(xor\) 运算的话取反边会直接炸掉. #includ ...

  3. 从一片森林(JavaScript)到另一片森林(C++)

    从JavaScript到C Plus Plus 作为一个忠诚的Web开发者,JavaScript几乎是我这一年多以来的首选,不管是开发网站后端服务,还是开发跨端应用,我都会首选一个使用JavaScri ...

  4. React-Router browserHistory浏览器刷新出现页面404解决方案

    在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是: 1.has ...

  5. Java 实现Redis客户端，服务端

    Java 实现Redis客户端,服务端 1.Java实现Redis发布订阅 1.1实例 2.[Redis]Java实现redis消息订阅/发布(PubSub) 3.java实现 redis的发布订阅 ...

  6. Java——定时任务调度工具

    一.什么是定时任务调度? 1.常用的定时调度工具:Timer和Quartz 二.Timer简介 1.Timer的定义以及架构 2.Timer示例 三.Timer的定时调度函数 1.schedule的四 ...

  7. 13.Linux文件存储系统

    1.Linux 系统中的文件存储结构 Linux系统中常见的目录名称以及相应内容 2.系统内核中的udev 设备管理器会自动把硬件名称规范起来,目的是让用户通过设备文件的名字可以猜出设备大致的属性以及 ...

  8. cassandra权威指南读书笔记--性能调优

    cassandra自带测试工具cassandra-stress.nodetool proxyhistograms可以在多个节点运行,发现最慢的协调节点.nodetool tablehistograms ...

  9. poj2778 DNA Sequence(AC自动机+矩阵快速幂）

    Description It's well known that DNA Sequence is a sequence only contains A, C, T and G, and it's ve ...

  10. codeforces Looksery Cup 2015 C. The Game Of Parity

    There are n cities in Westeros. The i-th city is inhabited by ai people. Daenerys and Stannis play t ...