"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[230],{6062:(n,s,a)=>{a.r(s),a.d(s,{data:()=>t});const t={key:"v-323bda7e",path:"/reference/plugin/plugins/editor.html",title:"@fesjs/plugin-monaco-editor",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"filename",slug:"filename",children:[]},{level:3,title:"publicPath",slug:"publicpath",children:[]},{level:3,title:"languages",slug:"languages",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"monaco",slug:"monaco",children:[]},{level:3,title:"组件 MonacoEditor",slug:"组件-monacoeditor",children:[]}]}],filePathRelative:"reference/plugin/plugins/editor.md",git:{updatedTime:1653450562e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5846:(n,s,a)=>{a.r(s),a.d(s,{default:()=>L});var t=a(6252);const e=(0,t._)("h1",{id:"fesjs-plugin-monaco-editor",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#fesjs-plugin-monaco-editor","aria-hidden":"true"},"#"),(0,t.Uk)(" @fesjs/plugin-monaco-editor")],-1),p=(0,t._)("h2",{id:"介绍",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,t.Uk)(" 介绍")],-1),o=(0,t.Uk)("我们会遇到需要编辑代码的场景，比如编辑"),l=(0,t._)("code",null,"json",-1),r=(0,t.Uk)("、"),c=(0,t._)("code",null,"javascript",-1),i=(0,t.Uk)("、"),u=(0,t._)("code",null,"python",-1),d=(0,t.Uk)("等等，"),k={href:"https://github.com/Microsoft/monaco-editor",target:"_blank",rel:"noopener noreferrer"},b=(0,t.Uk)("Monaco Editor"),h=(0,t.Uk)(" 是\b一个好用而且强大的的代码编辑器库，引入"),m=(0,t._)("code",null,"Monaco Editor",-1),g=(0,t.Uk)("有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 "),f=(0,t._)("code",null,"Monaco Editor",-1),y=(0,t.Uk)(" 版本是 "),v=(0,t._)("code",null,"1.9.1",-1),j=(0,t.Uk)("。"),q=(0,t.uE)('

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-monaco-editor": "^2.0.0"\n    },\n}\n

1
2
3
4
5
6

编译时配置

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

export default {\n    monacoEditor: {\n        languages: ['javascript', 'typescript', 'html', 'json']\n    }\n}\n

1
2
3
4
5

',6),w=(0,t.Uk)("我们通过 "),x=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),_=(0,t.Uk)(" 集成 "),U=(0,t._)("code",null,"Monaco Editor",-1),E=(0,t.Uk)(" 的 "),M=(0,t._)("code",null,"ESM",-1),P=(0,t.Uk)("版本，所以编辑时其实就是 "),C=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),T=(0,t.Uk)(" 的配置，具体配置项参考"),A={href:"https://github.com/Microsoft/monaco-editor-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},z=(0,t.Uk)("文档"),I=(0,t.Uk)("。"),O=(0,t.uE)('

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 {\n    monacoEditor: {\n        languages: ['javascript', 'typescript']\n    }\n}\n

1
2
3
4
5

API

monaco

',9),W=(0,t.Uk)("编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看"),F={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},S=(0,t.Uk)("monaco"),Z=(0,t.Uk)("官方文档。"),D=(0,t.uE)('

import { monaco } from '@fesjs/fes';\n\nmonaco.editor.defineTheme('myCoolTheme', {\n\tbase: 'vs',\n\tinherit: false,\n\trules: [\n\t\t{ token: 'custom-info', foreground: '808080' },\n\t\t{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },\n\t\t{ token: 'custom-notice', foreground: 'FFA500' },\n\t\t{ token: 'custom-date', foreground: '008800' },\n\t]\n});\n\n

1
2
3
4
5
6
7
8
9
10
11
12
13

组件 MonacoEditor

<template>\n    <MonacoEditor \n        v-model="json"\n        language="json"\n        height="400px"\n        check>\n    </MonacoEditor>\n</template>\n<script>\nimport { MonacoEditor } from '@fesjs/fes';\nexport default {\n    components: {\n        MonacoEditor\n    },\n    setup(){\n        const json = ref('');\n        return {\n            json\n        };\n    }\n}\n</script>\n

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`定义主题	string	`defaultTheme`
language	编辑器的语言	string	-
height	编辑器的高度	string	`100%`
width	编辑器的宽度	string	`100%`
modelValue(v-model)	编辑器的代码	string	-
readOnly	是否只读	boolean	`false`
options	编辑器的配置对象	object	`{}`
check	是否检查代码，如果检查不通过则不更新数据，目前只支持`json`	boolean	`false`

events

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

',7),H={},L=(0,a(3744).Z)(H,[["render",function(n,s){const a=(0,t.up)("OutboundLink");return(0,t.wg)(),(0,t.iD)(t.HY,null,[e,p,(0,t._)("p",null,[o,l,r,c,i,u,d,(0,t._)("a",k,[b,(0,t.Wm)(a)]),h,m,g,f,y,v,j]),q,(0,t._)("p",null,[w,x,_,U,E,M,P,C,T,(0,t._)("a",A,[z,(0,t.Wm)(a)]),I]),O,(0,t._)("p",null,[W,(0,t._)("a",F,[S,(0,t.Wm)(a)]),Z]),D],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,t]of s)a[n]=t;return a}}}]);

# 启用方式

# 编译时配置

# filename

# publicPath

# languages

# API

# monaco

# 组件 MonacoEditor

# props

# events