import{_ as o,r as p,o as c,c as l,b as s,d as n,a as t,f as e}from"./app.bd9c95b7.js";const i={},r=s("h1",{id:"fesjs-plugin-monaco-editor",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#fesjs-plugin-monaco-editor","aria-hidden":"true"},"#"),n(" @fesjs/plugin-monaco-editor")],-1),d=s("h2",{id:"介绍",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),n(" 介绍")],-1),u=s("code",null,"json",-1),k=s("code",null,"javascript",-1),h=s("code",null,"python",-1),v={href:"https://github.com/Microsoft/monaco-editor",target:"_blank",rel:"noopener noreferrer"},m=s("code",null,"Monaco Editor",-1),g=s("code",null,"Monaco Editor",-1),b=s("code",null,"1.9.1",-1),f=e(`

启用方式

在 package.json 中引入依赖：

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

编译时配置

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

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

`,6),y=s("code",null,"monaco-editor-webpack-plugin",-1),_=s("code",null,"Monaco Editor",-1),j=s("code",null,"ESM",-1),x=s("code",null,"monaco-editor-webpack-plugin",-1),q={href:"https://github.com/Microsoft/monaco-editor-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},w=e(`

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

API

monaco

`,9),E={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},M=e(`

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>
    <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>

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);function T(V,I){const a=p("ExternalLinkIcon");return c(),l("div",null,[r,d,s("p",null,[n("我们会遇到需要编辑代码的场景，比如编辑"),u,n("、"),k,n("、"),h,n("等等，"),s("a",v,[n("Monaco Editor"),t(a)]),n(" 是 \b 一个好用而且强大的的代码编辑器库，引入"),m,n("有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 "),g,n(" 版本是 "),b,n("。")]),f,s("p",null,[n("我们通过 "),y,n(" 集成 "),_,n(" 的 "),j,n("版本，所以编辑时其实就是 "),x,n(" 的配置，具体配置项参考"),s("a",q,[n("文档"),t(a)]),n("。")]),w,s("p",null,[n("编辑器的全局对象，提供扩展语言，自定义主题等等 API，具体用法请查看"),s("a",E,[n("monaco"),t(a)]),n("官方文档。")]),M])}const A=o(i,[["render",T],["__file","editor.html.vue"]]);export{A as default};

# 启用方式

# 编译时配置

# filename

# publicPath

# languages

# API

# monaco

# 组件 MonacoEditor

# props

# events