<!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. .NET5 它来了！微软大一统时代来临！

    今天双11,Microsoft released.NET 5(在他们的开发博客上同时发布).新版本的重点是改进.NET Core 3.1: 更小的单文件应用程序.对 Windows ARM64的支持以 ...

  2. 扒一扒ELF文件

    ELF文件(Executable Linkable Format)是一种文件存储格式.Linux下的目标文件和可执行文件都按照该格式进行存储,有必要做个总结. 目录 1. 链接举例 2. ELF文件类 ...

  3. P4826

    总的来说, 这道题只考查了单纯的建图和最大生成树 但这却是蓝题(问号 题意 题意的理解比较麻烦 简单说就是 n 支队伍比赛,i 号队伍和 j 号队伍比赛可获得 i ^ j 的分数,然后其中一支队伍会输 ...

  4. owncloud搭建

    使用OwnCloud建立属于自己私有的云存储网盘 OwnCloud概述: OwnCloud 一款文件主机服务软件,就是我们平时使用的云存储,不过这是在自己主机的服务器上建立属于自己的私有云,OwnCl ...

  5. Cisco的互联网络操作系统IOS和安全设备管理器SDM__管理Cisco互联网络

    1.如果不能远程登录到一台设备上,可能是由于远程设备上没有设置口令.也可能是由于访问控制列表过滤了远程登录会话. show users:检查都有哪些设备连接到了此路由器. clear line #:清 ...

  6. JavaScript里处理字符串的一些常用方法

    1.length 属性返回字符串的长度 let srt = "hello world!"; console.log(srt.length) // 12 2.indexOf() 方法 ...

  7. python爬虫模板 - 最好大学网

    import requests from bs4 import BeautifulSoup import bs4 def get_html_text(url): try: #kv = {'user-a ...

  8. 【uva 1515】Pool construction（图论--网络流最小割 模型题）

    题意:有一个水塘,要求把它用围栏围起来,每个费用为b.其中,(#)代表草,(.)代表洞,把一个草变成洞需要费用d, 把一个洞变成草需要费用f.请输出合法方案中的最小费用. 解法:(不好理解...... ...

  9. acm内容

  10. 用了很多年Dubbo，连Dubbo线程池监控都不知道，觉得自己很厉害？

    前言 micrometer中自带了很多其他框架的指标信息,可以很方便的通过prometheus进行采集和监控,常用的有JVM的信息,Http请求的信息,Tomcat线程的信息等. 对于一些比较活跃的框 ...