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. Python 实现的 12306抢票脚本

    Python12306抢票脚本 本脚本使用一个类来实现所有代码,大体上分为以下几个模块及其步骤:- 初始化对象属性(在抢票前进行的属性初始化,包括初始化浏览器模拟对象,个人信息等).- 建立模拟浏览器 ...

  2. 【Java基础】9、Enumeration接口和Iterator接口的区别

    package java.util; public interface Enumeration<E> {     boolean hasMoreElements();     E next ...

  3. ORM&MySQL

    概念: ORM:对象关系映射 , 全拼 Object-Relation Mapping ,是一种为了解决面向对象与关系数据库存在的互不匹配现象的技术.主要实现模型对象到关系型数据库数据的映射.比如:把 ...

  4. [总结]jQuery之常用函数方法参考手册

    w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...

  5. 【代码笔记】Web-JavaScript-JavaScript 数据类型

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 【读书笔记】iOS-基带攻击

    一,iOS设备中的蜂窝网络通信栈运行在专门的芯片上,这个芯片就是数字基带处理器. 参考资料:<黑客攻防技术宝典-iOS实战篇>

  7. 1145.cn 百度MIP适配实例

    MIP,全称Mobile Instant Pages(移动端即时页面),是百度推出的一套移动端网页开放技术标准.网站移动端页面统计MIP改造,能实现页面缓存,从而达到移动网页加速效果. 百度官方已经明 ...

  8. 微信小程序测试二三事

    微信小程序虽是微信推出的新形态的产品,但是在测试思路上跟其他的传统测试,大相径庭.既然大相径庭,那我们该如何测试呢. 功能测试功能测试跟传统的web功能测试一样,不是app的功能测试哦.这是因为小程序 ...

  9. loadrunner 场景设计-IP Spoofer-多ip负载生成器(Windows平台)

    IP Spoofer-多ip负载生成器 by:授客 QQ:1033553122 1  适用协议 LoadRunner的多ip功能允许运行在单一负载生成器上的Vuser可以通过多ip被识别.服务器和路由 ...

  10. Android Color颜色代码

    常用颜色代码 <?xml version="1.0" encoding="utf-8"?> <resources> <color ...