Fes.js

@fesjs/plugin-monaco-editor

介绍

我们会遇到需要编辑代码的场景，比如编辑json、javascript、python等等，Monaco Editor在新窗口打开 是一个好用而且强大的的代码编辑器库，引入Monaco Editor有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 Monaco Editor 版本是 1.9.1。

启用方式

在 package.json 中引入依赖：

{
    "dependencies": {
        "@fesjs/fes": "^2.0.0",
        "@fesjs/plugin-monaco-editor": "^2.0.0"
    },
}
1
2
3
4
5
6

编译时配置

在执行 fes dev 或者 fes build 时，通过此配置生成运行时的代码，在配置文件.fes.js 中配置：

export default {
    monacoEditor: {
        languages: ['javascript', 'typescript', 'html', 'json']
    }
}
1
2
3
4
5

我们通过 monaco-editor-webpack-plugin 集成 Monaco Editor 的 ESM版本，所以编辑时其实就是 monaco-editor-webpack-plugin 的配置，具体配置项参考文档在新窗口打开。

filename

  • 类型：自定义worker脚本名称

  • 默认值：'[name].worker.js'

publicPath

  • 类型：自定义worker脚本的路径

  • 默认值：''

languages

  • 类型：需要支持的语言类型

  • 默认值：['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']

  • 详情：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如javascript依赖typescript，需要使用javascript时需要配置为：

export default {
    monacoEditor: {
        languages: ['javascript', 'typescript']
    }
}
1
2
3
4
5

API

monaco

编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看monaco在新窗口打开官方文档。

import { monaco } from '@fesjs/fes';

monaco.editor.defineTheme('myCoolTheme', {
	base: 'vs',
	inherit: false,
	rules: [
		{ token: 'custom-info', foreground: '808080' },
		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
		{ token: 'custom-notice', foreground: 'FFA500' },
		{ token: 'custom-date', foreground: '008800' },
	]
});
1
2
3
4
5
6
7
8
9
10
11
12
13

组件 MonacoEditor

<template>
    <MonacoEditor 
        v-model="json"
        language="json"
        height="400px"
        check>
    </MonacoEditor>
</template>
<script>
import { MonacoEditor } from '@fesjs/fes';
export default {
    components: {
        MonacoEditor
    },
    setup(){
        const json = ref('');
        return {
            json
        };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

props

属性说明类型默认值
theme编辑器的主题，使用其他主题需要先使用monaco.editor.defineTheme定义主题stringdefaultTheme
language编辑器的语言string-
height编辑器的高度string100%
width编辑器的宽度string100%
modelValue(v-model)编辑器的代码string-
readOnly是否只读booleanfalse
options编辑器的配置对象object{}
check是否检查代码，如果检查不通过则不更新数据，目前只支持jsonbooleanfalse

events

事件名称说明回调参数
onload编辑器初始化后触发({monaco, editor, editorModel}) => void
scrollChange滚动时触发(e) => void