<!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. deepin定制deepin-terminal

    一. 背景介绍 本人以前在win10上经常使用xshell来登陆服务器.xshell提供了很丰富的功能和快捷键.个人比较喜欢的包括三个功能 终端透明 双击时根据分隔符选中文字 突出显示 但是自从使用d ...

  2. Java——反射机制

    反射概念: Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其modifier ...

  3. java使用Test测试接口类

    package com.jy.demo.web; import java.util.Map; import org.junit.BeforeClass; import org.junit.Test; ...

  4. A - A Supermarket (贪心， 并查集)

    超市里有n个产品要卖,每个产品都有一个截至时间dx(从开始卖时算起),只有在这个截至时间之前才能卖出并且获得率润dy. 有多个产品,所有可以有不同的卖出顺序,每卖一个产品要占用1个单位的时间,问最多能 ...

  5. hdu3555 Bomb(要49）

    Problem Description The counter-terrorists found a time bomb in the dust. But this time the terroris ...

  6. AtCoder Beginner Contest 184 E - Third Avenue (BFS)

    题意:给你一张图,\(S\)表示起点,\(G\)表示终点,\(.\)表示可以走,#表示不能走,小写字母可以传送到任意一个相同的字母的位置,问从\(S\)走到\(G\)的最小步数. 题解:假如不考虑字母 ...

  7. Vitya and Strange Lesson CodeForces - 842D 字典树+交换节点

    题意: Today at the lesson Vitya learned a very interesting function - mex. Mex of a sequence of number ...

  8. LInux 终端命令

    删除目录: 绝对路径开头以"/"开始之后跟着根目录或家目录 删除后不会在垃圾站中 树的顶部那个'.'代表当前目录 用mv命令对一个存在文件重命名 这个more关键字一次性显示不完的 ...

  9. 【ybt金牌导航1-2-6】【luogu P2467】地精部落

    地精部落 题目链接:ybt金牌导航1-2-6 / luogu P2467 题目大意 有一个排列,要使得每个位置要么都比两边高,要么比两边低. 而且一定要以一高一低的方式排列. 两边的只用比旁边的那个高 ...

  10. DSSM在召回和粗排的应用举例

    0.写在前面的话 DSSM(Deep Structured Semantic Models)又称双塔模型,因其结构简单,在推荐系统中应用广泛:下面仅以召回.粗排两个阶段的应用举例,具体描述下DSSM在 ...