Monaco Editor 有很多版本
- 原版:Monaco Editor
- 原版是纯 api 式用法,创建调用create,传入(language,option,width,height等等)来初始化,针对Vue,React的适配版本是组件式的用法,所以推荐使用组件式用法的包。
- Vue:monaco-editor-vue
- React:react-monaco-editor,@monaco-editor/react
其中,对于原版、monaco-editor-vue、react-monaco-editor这些,如果需要语法高亮,则需要引入对应的语言包,或者在webpack配置monaco-editor-webpack-plugin来实现。
本文章对@monaco-editor/react演示,应为它不需要做其他配置
Monaco Editor for React · use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins
option
options: {
value: '', // 初始值
foldingStrategy: 'indentation', // 代码可分小段折叠
automaticLayout: true, // 自适应布局
overviewRulerBorder: false, // 不要滚动条的边框
autoClosingBrackets: true,
tabSize: 2, // tab 缩进长度
readOnly: true, // 只读, 不可编辑
minimap: {
enabled: false, // 不要小地图
},
自动格式化
import React, { useRef } from 'react';
import MonacoEditor from '@monaco-editor/react';
const Main: React.FC = () => {
const editorRef = useRef<any>();
const handleValidate = (markers: Object) => {
// 没有错误时,格式化文档
if (!Object.keys(markers).length) {
editorRef.current?.getAction('editor.action.formatDocument').run();
}
};
return (
<div style={{ height: '200px' }}>
<MonacoEditor
language="json"
value="// some comment"
onValidate={handleValidate}
onMount={editor => {
editorRef.current = editor;
}}
/>
</div>
);
};
export default Main;