网页编辑器-monaco-editor

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

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 恭喜！完成编辑器

相关推荐

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

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

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

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

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）