fes.js/assets/editor.html.0d361fe8.js

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(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;@fesjs/plugin-monaco-editor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;javascript&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;typescript&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;html&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;json&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,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(`<h3 id="filename" tabindex="-1"><a class="header-anchor" href="#filename" aria-hidden="true">#</a> filename</h3><ul><li><strong>类型</strong>：自定义 worker 脚本名称</li><li><strong>默认值</strong>：<code>&#39;[name].worker.js&#39;</code></li></ul><h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><strong>类型</strong>：自定义 worker 脚本的路径</li><li><strong>默认值</strong>：<code>&#39;&#39;</code></li></ul><h3 id="languages" tabindex="-1"><a class="header-anchor" href="#languages" aria-hidden="true">#</a> languages</h3><ul><li><p><strong>类型</strong>：需要支持的语言类型</p></li><li><p><strong>默认值</strong>：<code>[&#39;abap&#39;, &#39;apex&#39;, &#39;azcli&#39;, &#39;bat&#39;, &#39;bicep&#39;, &#39;cameligo&#39;, &#39;clojure&#39;, &#39;coffee&#39;, &#39;cpp&#39;, &#39;csharp&#39;, &#39;csp&#39;, &#39;css&#39;, &#39;dart&#39;, &#39;dockerfile&#39;, &#39;ecl&#39;, &#39;elixir&#39;, &#39;fsharp&#39;, &#39;go&#39;, &#39;graphql&#39;, &#39;handlebars&#39;, &#39;hcl&#39;, &#39;html&#39;, &#39;ini&#39;, &#39;java&#39;, &#39;javascript&#39;, &#39;json&#39;, &#39;julia&#39;, &#39;kotlin&#39;, &#39;less&#39;, &#39;lexon&#39;, &#39;liquid&#39;, &#39;lua&#39;, &#39;m3&#39;, &#39;markdown&#39;, &#39;mips&#39;, &#39;msdax&#39;, &#39;mysql&#39;, &#39;objective-c&#39;, &#39;pascal&#39;, &#39;pascaligo&#39;, &#39;perl&#39;, &#39;pgsql&#39;, &#39;php&#39;, &#39;postiats&#39;, &#39;powerquery&#39;, &#39;powershell&#39;, &#39;pug&#39;, &#39;python&#39;, &#39;qsharp&#39;, &#39;r&#39;, &#39;razor&#39;, &#39;redis&#39;, &#39;redshift&#39;, &#39;restructuredtext&#39;, &#39;ruby&#39;, &#39;rust&#39;, &#39;sb&#39;, &#39;scala&#39;, &#39;scheme&#39;, &#39;scss&#39;, &#39;shell&#39;, &#39;solidity&#39;, &#39;sophia&#39;, &#39;sparql&#39;, &#39;sql&#39;, &#39;st&#39;, &#39;swift&#39;, &#39;systemverilog&#39;, &#39;tcl&#39;, &#39;twig&#39;, &#39;typescript&#39;, &#39;vb&#39;, &#39;xml&#39;, &#39;yaml&#39;]</code></p></li><li><p><strong>详情</strong>：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如<code>javascript</code>依赖<code>typescript</code>，需要使用<code>javascript</code>时需要配置为：</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;javascript&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;typescript&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="monaco" tabindex="-1"><a class="header-anchor" href="#monaco" aria-hidden="true">#</a> monaco</h3>`,9),E={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},M=e(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> monaco <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

monaco<span class="token punctuation">.</span>editor<span class="token punctuation">.</span><span class="token function">defineTheme</span><span class="token punctuation">(</span><span class="token string">&#39;myCoolTheme&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">&#39;vs&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">inherit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">&#39;custom-info&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">&#39;808080&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">&#39;custom-error&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">&#39;ff0000&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">&#39;bold&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">&#39;custom-notice&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">&#39;FFA500&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">&#39;custom-date&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">&#39;008800&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件-monacoeditor" tabindex="-1"><a class="header-anchor" href="#组件-monacoeditor" aria-hidden="true">#</a> 组件 MonacoEditor</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MonacoEditor</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>400px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">check</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>MonacoEditor</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MonacoEditor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        MonacoEditor<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            json<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> props</h4><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>theme</td><td>编辑器的主题，使用其他主题需要先使用<code>monaco.editor.defineTheme</code>定义主题</td><td>string</td><td><code>defaultTheme</code></td></tr><tr><td>language</td><td>编辑器的语言</td><td>string</td><td>-</td></tr><tr><td>height</td><td>编辑器的高度</td><td>string</td><td><code>100%</code></td></tr><tr><td>width</td><td>编辑器的宽度</td><td>string</td><td><code>100%</code></td></tr><tr><td>modelValue(v-model)</td><td>编辑器的代码</td><td>string</td><td>-</td></tr><tr><td>readOnly</td><td>是否只读</td><td>boolean</td><td><code>false</code></td></tr><tr><td>options</td><td>编辑器的配置对象</td><td>object</td><td><code>{}</code></td></tr><tr><td>check</td><td>是否检查代码，如果检查不通过则不更新数据，目前只支持<code>json</code></td><td>boolean</td><td><code>false</code></td></tr></tbody></table><h4 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> events</h4><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>onload</td><td>编辑器初始化后触发</td><td>({monaco, editor, editorModel}) =&gt; void</td></tr><tr><td>scrollChange</td><td>滚动时触发</td><td>(e) =&gt; void</td></tr></tbody></table>`,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};