<!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. 20201115gryz模拟赛解题报告

    写在前面 T1:期望100pts,实际0pts(7:50 ~ 8:50 T2:期望0pts,实际0pts(10:00 ~ 10:35 T3:期望20pts,实际40pts( 9:10 ~ 10:00, ...

  2. Node.js 安全指南

    当项目周期快结束时,开发人员会越来越关注应用的"安全性"问题.一个安全的应用程序并不是一种奢侈,而是必要的.你应该在开发的每个阶段都考虑应用程序的安全性,例如系统架构.设计.编码, ...

  3. SpringCloud-常用组件介绍

    SpringCloud-常用组件介绍 分布式系统开发用于分布式环境(多个服务器不在同一个机房,同一个业务服务在多台服务器运行) Spring Cloud 是基于Springboot的分布式云服务架构, ...

  4. 十四：SpringBoot-配置MongoDB数据库，实现增删改查逻辑

    SpringBoot-配置MongoDB数据库,实现增删改查逻辑 1.MongoDB数据库 1.1 MongoDB简介 1.2 MongoDB特点 2.SpringBoot整合MongoDB 2.1 ...

  5. H5Slides幻灯演示系统

    H5Slides幻灯演示系统基于HTML5的幻灯片编辑,播放的工具. 通过HTML5的技术,可以在浏览器上进行编辑.传播.控制幻灯片. 选择样板模式 添加新的页面 特点 它是HTML5的! 不需要臃肿 ...

  6. 从零搭建一个IdentityServer——聊聊Asp.net core中的身份验证与授权

    OpenIDConnect是一个身份验证服务,而Oauth2.0是一个授权框架,在前面几篇文章里通过IdentityServer4实现了基于Oauth2.0的客户端证书(Client_Credenti ...

  7. [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(2)

    [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(2) 目录 [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(2) 0x00 摘要 ...

  8. C - Door Man（欧拉回路_格式控制）

    现在你是一个豪宅的管家,因为你有个粗心的主人,所以需要你来帮忙管理,输入会告诉你现在一共有多少个房间,然后会告诉你从哪个房间出发,你的任务就是从出发的房间通过各个房间之间的通道,来把所有的门都关上,然 ...

  9. 2019牛客暑期多校训练营（第九场）B Quadratic equation （平方剩余）

    \((x+y)\equiv b\pmod p\) \((x\times y)\equiv c\pmod p\) 由第一个式子可知:\(x+y=b~or~x+y=b+p\) 先任选一个代入到第二个式子里 ...

  10. Codeforces Global Round 8 D. AND, OR and square sum（位运算）

    题目链接:https://codeforces.com/contest/1368/problem/D 题意 给出一个大小为 $n$ 的数组 $a$,每次可以选两个下标不同的元素,一个赋为二者相与的值, ...