1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5.     <link
  6.       rel="stylesheet"
  7.       data-name="vs/editor/editor.main"
  8.       href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
  9.     />
  10.     <style>
  11.       html,
  12.       body {
  13.         position: relative;
  14.         padding: 0;
  15.         margin: 0;
  16.         height: 100vh;
  17.         width: 100vw;
  18.         overflow: hidden;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <script>
  24.       var require = {
  25.         paths: { vs: "../node_modules/monaco-editor/min/vs" },
  26.         "vs/nls": { availableLanguages: { "*": "zh-cn" } },
  27.       };
  28.     </script>
  29.     <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
  30.     <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
  31.     <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.zh-cn.js"></script>
  32.     <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
  34.     <script>
  35.       var editor = monaco.editor.create(document.body, {
  36.         value: "// monaco editor example",
  37.         language: "javascript",
  38.         theme: "vs-dark",
  39.       });
  41.       let offset = 0;
  42.       let codeStr = `
  43. import monaco from "monaco-editor";
  45. var editor = monaco.editor.create(document.body, {
  46.   value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join(
  47.     "\\n"
  48.   ),
  49.   language: "javascript",
  50. });
  51. `;
  53.       let id = setInterval(() => {
  54.         const oldValue = editor.getValue();
  55.         const addValue = codeStr[offset++];
  56.         editor.setPosition(new monaco.Position(0, 0));
  58.         if (addValue === undefined) {
  59.           clearInterval(id);
  60.           return;
  61.         }
  63.         editor.setValue(oldValue + addValue);
  64.       }, 60);
  65.     </script>
  66.   </body>
  67. </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. Java 从数组来看值传递和引用传递

    从数组来看值传递和引用传递 惯例先看一段代码 public class DemoCollection14 { public static void main(String[] args) { Stri ...

  2. C#编写一个在asp.net core 3.1下的简单的corn模式的计划任务和一个更简单的定时器类

    asp.net core 下,新增了一个BackgroundService用来实现能在后台跑一个长久运行的任务,因此,也可以用来替换掉原来使用的static的Timer组件, Timer组件主要有以下 ...

  3. 【Oracle】SQL/92 执行多个表的连接

    内连接 外连接 自连接 交叉连接 1.内连接 表名 INNER JOIN 表名 ON 条件 等价于: FROM 表名, 表名 WHERE 条件 SELECT p.name, pt.name, pt.p ...

  4. html输入框输入显示剩余字数

     效果图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  5. （14）Linux绝对路径和相对路径

    Linux 系统中,文件是存放在目录中的,而目录又可以存放在其他的目录中,因此,用户(或程序)可以借助文件名和目录名,从文件树中的任何地方开始,搜寻并定位所需的目录或文件. 说明目录或文件名位置的方法 ...

  6. DEDECMS：解决无法上传图片（在后台插入图片时提示类型不允许）

    在include/uploadsafe.inc.php里把 $imtypes = array ( "image/pjpeg", "image/jpeg", &q ...

  7. HarmonyOS单模块编译与源码导读

    我这里以3518的开发板为例进行讲解,3516的也是通用的. 下面是之前全量编译的脚本 python build.py ipcamera_hi3518ev300 -b debug HarmonyOS最 ...

  8. 自定义 ocelot 中间件输出自定义错误信息

    自定义 ocelot 中间件输出自定义错误信息 Intro ocelot 中默认的 Response 中间件在出错的时候只会设置 StatusCode 没有具体的信息,想要展示自己定义的错误信息的时候 ...

  9. A - 欧拉回路

    欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input测试输入包含若干测试用例.每个测试用例的第1行给出两个正整数,分别是节点数N ...

  10. CF Hello2020 D. New Year and Conference

    D. New Year and Conference 题意 有\(2n\)个区间,分别为\([sa_1,ea_1],[sb_1,eb_1],[sa_2,ea_2],[sb_2,eb_2],\cdots ...