@fesjs/plugin-monaco-editor ​

介绍 ​

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

启用方式 ​

在 package.json 中引入依赖:

{
"dependencies":{
"@fesjs/fes":"^3.0.0",
"@fesjs/plugin-monaco-editor":"^3.0.0"
}
}

编译时配置 ​

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

exportdefault{
monacoEditor:{
languages: ['javascript','typescript','html','json'],
},
};

我们通过 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时需要配置为:

exportdefault{
monacoEditor:{
languages: ['javascript','typescript'],
},
};

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'},
 ],
});

组件 MonacoEditor ​

<template>
<MonacoEditorv-model="json"language="json"height="400px"check></MonacoEditor>
</template>
<script>
import{MonacoEditor}from'@fesjs/fes';
exportdefault{
components:{
 MonacoEditor,
},
setup(){
constjson=ref('');
return{
json,
};
},
};
</script>

props ​

events ​