代码编辑器monaco-editor用法入门

monaco editor是微软开源的一款web版代码编辑器。它支持智能提示,代码高亮,代码格式化。

这里简单介绍下它的用法。

1、下载安装monaco-editor

npm install monaco-editor

下载后,安装目录为node_modules/monaco-editor/。

2、添加loader.js脚本到页面

在集成monaco-editor的页面,添加

<script src="monaco-editor/min/vs/loader.js"></script>

注意脚本的相对路径,根据实际情况修改。monaco-editor使用的是vs的loader.js加载。

3、集成到页面

<!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="monaco-editor/min/vs/loader.js"></script>
<script>
	require.config({ paths: { 'vs': '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>

id为container的div为monaco编辑器插入的位置。

配置路径别名

require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});

require.config配置了monaco-editor的安装路径,使用vs作为别名。在后续的引用脚本里不需要再写长的相对路径。

加载editor.main依赖

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

路径里的vs为require.config配置的别名,editor.main为编辑器的主入口。这里添加了依赖editor.main,并加载。function(){},为加载editor.main完成后的回调函数。

创建editor实例

var editor = monaco.editor.create(document.getElementById('container'), {
			value: [
				'function x() {',
				'\tconsole.log("Hello world!");',
				'}'
			].join('\n'),
			language: 'javascript'
		});

monaco.editor.create创建了editor实例。

create接口定义如下:

create(domElement: HTMLElement, options?: IEditorConstructionOptions, override?: IEditorOverrideServices): IStandaloneCodeEditor

create有三个参数:

  • domElement:绑定的dom元素
  • options:可选,配置编辑器的参数,如编辑器的初始内容value,代码的编程语言language。
  • override:可选。

示例里创建了一个javascript的脚本编辑器。

4、设置或获取编辑器的值

设置值:

editor.setValue("function func(){\nconsole.log("hello"\n}");

获取代码内容

editor.getValue()

5、监听事件

监听内容被修改:onDidChangeModelContent

editor.onDidChangeModelContent((e) => { 
   console.log(e)   
});

监听blur事件

editor.onDidBlurEditor((e) => { 
     console.log(e); 
});

有关编辑器接口更多的事件方法参考IStandaloneCodeEditor

版权声明:著作权归作者所有。

相关推荐

JPA Hibernate 快速入门

为了学习JPA的实体状态的转化,我们先搭建一个通过JPA Hibernate存储实体到数据库的Demo,后续的学习都在此demo基础上展开。添加Hibernate依赖 <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-entitymanager&l

CKEditor 5设置编辑器高度

CKEditor 5提供的几种编辑器,它们的高度是随着内容变化的,官方没有提供设置编辑器高度的参数配置。如果要给编辑器固定高度有以下两种做法。对于经典版(classic editor build),可以通过CSS:.ck-editor__editable_inline {  height: 200px;}对于所有版本,可以通过js来设置:editor.editing.view.chang

Linux vim编辑器的配置及使用

Linux自带的编辑器有nano和vi,但vi编辑器使用起来很不方便,我们需要先下载vim编辑器,它是vi编辑器的升级版,更人性化些,接下来笔者就教大家如何在树莓派系统下安装和配置vim。安装更新apt源:sudo apt-get update安装vim编辑器:sudo apt-get install vim未配置vim时文档的显示无高亮,无行号,必须使用shift+:在命令模式下q退出。vim编

React Apollo入门

入门Apollo Client最简单的方法是使用Apollo Boost,它会给客户端配置推荐的设置。使用Apollo Boost创建app的内容包括缓存,本地状态管理以及错误处理。安装首先安装以下的软件包:npm install apollo-boost react-apollo graphql-tag graphq

IndexDB快速入门

IndexDB是适用于浏览器的文档数据库,它有以下特点:兼容所有现代的浏览器支持事务以及版本控制支持无限数量的数据。很多浏览器会限定localStorage或者sessionStorage的存储空间为2M到10MIndexDB是异步的API,它不会阻塞浏览器UI的渲染下面介绍下它的使用。安装依赖包idb需要把idb的js库添加到依赖。有几种方式添加idb到依赖。yarnyarn add&

SpringBoot入门示例

创建Maven POM文件在pom.xml添加内容如下:<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht