1.下载安装monaco-editor

npm install monaco-editor

我的安装目录在

C://Windows//SystemApps//Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe//23//common//monaco-editor/

2.集成界面

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

</head>

<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script src="C://Windows//SystemApps//Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe//23//common//monaco-editor//min//vs//loader.js"></script>

<script>

    require.config({ paths: { 'vs': 'C://Windows//SystemApps//Microsoft.MicrosoftEdgeDevToolsClient_8wekyb3d8bbwe//23//common//monaco-editor//min//vs' }});

    require(['vs/editor/editor.main'], function() {

        var editor = monaco.editor.create(document.getElementById('container'), {

            value: [

                'function x() {',

                '\tconsole.log("Hello world!");',

                '}'

            ].join('\n'),

            language: 'javascript'

        });

    });

</script>

</body>

</html>

3.运行结果

代码编辑器monaco-editor之基础使用的更多相关文章

  1. Asp.Net Core 使用Monaco Editor 实现代码编辑器

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...

  2. Monaco Editor 使用入门

    以前项目是用ace编辑器的,但是总有些不敬人意的地方.前端事件看见的VS Code编辑器Monaco Editor准备更换下,下面介绍一些使用中遇到的一点问题.代码提示 1.项目引用 import * ...

  3. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  4. 使用 TypeScript，React，ANTLR 和 Monaco Editor 创建一个自定义 Web 编辑器(二)

    译文来源 欢迎阅读如何使用 TypeScript, React, ANTLR4, Monaco Editor 创建一个自定义 Web 编辑器系列的第二章节, 在这之前建议您阅读使用 TypeScrip ...

  5. 【前端】ACE Editor（代码编辑器） 简易使用示例

    身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...

  6. ACE Editor在线代码编辑器简介及使用引导

    转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...

  7. 【软工】[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE

    [技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE 官方文档与重要参考资料 官方demo 官方API调用样例 Playground 官方API Doc,但其搜索框不支持模 ...

  8. 手把手教你实现在Monaco Editor中使用VSCode主题

    背景 笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...

  9. 【转】代码编辑器（二）-SynEdit

    在我去年的时候我就有这个了,而且这是我第二个第三方的控件(第一个是DevExpress),这个是专门做代码编辑器的.安装方法:点我. 安装成功了之后,会在Tool Palette看到两个:SynEdi ...

随机推荐

  1. 在Web.config或App.config中的添加自定义配置 <转>

        .Net中的System.Configuration命名空间为我们在web.config或者app.config中自定义配置提供了完美的支持.最近看到一些项目中还在自定义xml文件做程序的配置 ...

  2. 【开发工具之eclipse】7、eclipse代码自动提示，eclipse设置代码自动提示

    首先打开Eclipse开发软件,然后在工具栏的[Window],点击后找到弹出列表中的[Preferences]选项,然后点击这个选项   现在弹出的窗口就是JAVA开发人员常见的设置窗口了,我们依次 ...

  3. PHP cURL获取微信公众号access_token

    1.开发微信公众号首先要获取access_token,在运行代码前现在开发者设置中把本服务器IP添加到白名单中 public function index(){ $appId = 'wxd0e50fe ...

  4. “一切都是消息”--iMSF（即时消息服务框架）入门简介

    “一切都是消息”--这是iMSF(即时消息服务框架)的设计哲学. MSF的名字是 Message Service Framework 的简称,由于目前框架主要功能在于处理即时(immediately) ...

  5. SQLite 知识摘要 --- 事务

    在许多时候,我们在使用大数据的时候会发现,尽管sqlite数据库的执行效率已经很快了,但是还是满足不了我们的需求,这时候我们会很容易考虑到使用并发的方式去访问sqlite数据库,但是sqlite数据独 ...

  6. Ansible--原理

    什么是Ansible Ansible是一种IT自动化运维工具,它可以配置系统,部署软件以及协调更高级的IT任务,例如持续部署或者是零停机滚动更新Ansible是新出现的自动化运维工具,基于Python ...

  7. JMeter http(s)测试脚本录制器的使用

    JMeter http(s)测试脚本录制器的使用 by:授客 QQ:1033553122 http(s) Test Script Recorder允许Jmeter在你使用普通浏览器浏览web应用时,拦 ...

  8. Java并发编程（十一）线程池的使用

    1.new Thread的弊端如下: a. 每次new Thread新建对象性能差. b. 线程缺乏统一管理,可能无限制新建线程,相互之间竞争,及可能占用过多系统资源导致死机或oom. c. 缺乏更多 ...

  9. recovery 升级'@/cache/recovery/block.map' failed错误问题

    随着android版本升级,升级包越来越大,当升级包无法存储在cache分区的时候,会把升级包下载到data分区,然后从data分区升级,最近从data分区加载升级包升级的时候,遇到了如下错误: [ ...

  10. nginx 配置简单网站项目（linux下）

    1.新建html2与html3两个网站项目测试,而html是本身就有,记得到/etc/hosts 添加dns记录 2.修改nginx.conf文件 3.测试访问 中间用到一些nginx的命令,就不截图 ...