网页编辑器-monaco-editor

zhezhongyun 2024-12-01 19:26 49 浏览

1. 简介

monaco-editor 编辑器是VS代码的代码编辑器。这里有一个描述代码编辑器功能的好页面。它是根据麻省理工学院许可证授权的，支持Edge、Chrome、Firefox、Safari和Opera。移动浏览器或移动web框架不支持 monaco-editor 编辑器。更多信息，请访问摩纳哥编辑库。

2. 获取 cdnjs

cdnjs是一项免费的开源CDN服务，受到超过12.5%的网站的信任，每月提供超过2000亿次请求，由Cloudflare提供支持。我们使在您的网站上加载库文件变得更快、更容易。

官网地址： cdnjs - The #1 free and open source CDN built to make life easier for developers

进入后,会看见一个搜索框,点击后输入你想要的库（如： monaco-editor）

点击搜索结果跳转后，将会出现一系列的链接。选择其中一个版本复制即可。

3. 开始使用

3.1 引入 js 文件和 css 文件

<link rel="stylesheet" data-name="vs/editor/editor.main" 
                href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"></script>

3.2 搭建基本结构 - html

<div id="box"></div>

3.3 使用 monaco - js

require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs' } });
require(["vs/editor/editor.main"], () => {
    monaco.editor.create(document.getElementById('box'), {
        value: `function hello() {
                console.log("Hello world!");
            }`,
        language: 'javascript',
        theme: 'vs-dark',
    });
});

3.4 恭喜！完成编辑器

经过前面的引入、搭建、编写的过程。我们可以看见成果了。

预览效果：

HTML 编辑器

上一篇：PDF编辑流程，另附5款好用的PDF编辑器
下一篇：HTML基础

网页编辑器-monaco-editor

1. 简介

2. 获取 cdnjs

3. 开始使用

3.1 引入 js 文件和 css 文件

3.2 搭建基本结构 - html

3.3 使用 monaco - js

3.4 恭喜！完成编辑器

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?