首页>建站资源>其他资源
下载

摩纳哥诉讼

使用VUE 2和3中从CDN加载的monaco-editor ，无需捆绑。

英语| 简体中文

为什么

monaco-editor不太支持ESM，这会导致代码捆绑时会导致大文件。

但是官方团队已将加载程序写入编辑器的懒负载文件，以便我们可以从CDN加载文件以使用它。

如果您仍然想从node_modules导入monaco-editor文件并将其捆绑到代码中（不使用远程加载），则需要使用捆绑工具。请参阅此处。

安装

npm i @guolao/vue-monaco-editor

vue <= 2.6.14要求安装 @vue/coption-api。 

npm i @guolao/vue-monaco-editor @vue/composition-api

不要忘记注册@vue/composition-api插件！ 

 import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue . use ( VueCompositionAPI )

当然，您也可以使用UNPKG。

用法

全球注册

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

当地注册

 // main.ts
import { loader } from '@guolao/vue-monaco-editor'
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' ,
  } ,
} )

// editor.vue
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
export default {
  components : { VueMonacoEditor } ,
}

然后，使用它。

编辑

< template >
  < vue-monaco-editor
    v-model:value = " code "
    theme = " vs-dark "
    :options = " MONACO_EDITOR_OPTIONS "
    @mount = " handleMount "
  />
</ template >

< script lang="ts" setup>
import { ref , shallowRef } from ' vue '

const MONACO_EDITOR_OPTIONS = {
  automaticLayout: true ,
  formatOnType: true ,
  formatOnPaste: true ,
}

const code = ref ( ' // some code... ' )
const editor = shallowRef ()
const handleMount = editorInstance => ( editor . value = editorInstance )

// your action
function formatCode() {
  editor . value ?. getAction ( ' editor.action.formatDocument ' ). run ()
}
</ script >

差异编辑器

< template >
  < vue-monaco-diff-editor
    theme = " vs-dark "
    original = " // the original code "
    modified = " // the modified code "
    language = " javascript "
    :options = " OPTIONS "
    @mount = " handleMount "
  />
</ template >

< script lang="ts" setup>
import { ref , shallowRef } from ' vue '

const OPTIONS = {
  automaticLayout: true ,
  formatOnType: true ,
  formatOnPaste: true ,
  readOnly: true ,
}

const diffEditor = shallowRef ()
const handleMount = diffEditorInstance => ( diffEditor . value = diffEditorInstance )

// get the original value
function getOriginalValue() {
  return diffEditor . value . getOriginalEditor (). getValue ()
}

// get the modified value
function getModifiedValue() {
  return diffEditor . value . getModifiedEditor (). getValue ()
}
</ script >

道具和事件和老虎机

编辑

姓名类型默认描述评论
价值string当前模型的值，可以使用v-model:value v-model:value
语言string当前模型的所有语言monaco-editor支持的语言，此处查看
小路string通往当前模型的路径
默认值string当前模型的默认值
默认语言string当前模型的默认语言monaco-editor支持的语言此处支持
默认路径string当前模型的默认路径monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))
主题vs | vs-dark vs摩纳哥编辑的主题。
线number跳到的线数
选项object {} istandaloneeditorConstructionOptions
超级服务object {} IEDOTOROVERRIDESERVICES
SaveViewState boolean true在模型更改后，保存模型的视图状态（滚动位置等）每个模型都需要配置一个独特的path
宽度number | string 100%容器宽度
高度number | string 100%容器高度
className string内容器类名称
@beforemount (monaco: Monaco) => void在创建编辑器实例之前执行（在VUE2中不要使用@before-mount @
@山(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void在创建编辑器实例之后执行
@改变(value: string | undefined, event: monaco.editor.IModelContentChangedEvent) => void当更改值更改时执行
@证实(markers: monaco.editor.IMarker[]) => void当语法错误发生时执行monaco-editor支持语法检查的语言在此处查看
#default slot 'loading...'加载状态从CDN加载文件时，显示加载状态将更加友好
#failure slot 'load failed'故障状态示例：CDN网络错误

差异编辑器

姓名类型默认描述
原来的string原始源值（左编辑器）
修改的string修改后的源值（右编辑器）
语言string两种模型的语言 - 原始和修改的语言（摩纳哥编辑支持的所有语言）
原始语言string此道具使您有机会分别指定原始源的语言，否则，它将获得语言属性的价值。
修改语言string该道具使您有机会分别指定修改源的语言，否则，它将获得语言属性的价值。
OriginalModelPath string “原始”模型的路径。将作为第三个论点传递给.createModel方法monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))
修改Modelpath string “修改”模型的路径。将作为第三个参数传递给.createModel方法monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))
主题vs | vs-dark | string vs （ vs主题等于light主题）摩纳哥编辑的主题。定义monaco.editor.defineTheme的新主题。
选项object {} istandalonEdiffitorConstructionoptions
宽度number | string 100%容器宽度
高度number | string 100%容器高度
className string内容器类名称
@beforemount (monaco: Monaco) => void在创建编辑器实例之前执行（在VUE2中不要使用@before-mount @
@山(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void在创建编辑器实例之后执行
#default slot 'loading...'加载状态
#failure slot 'load failed'故障状态

钩子

useMonaco使用 @摩纳哥编辑器/加载程序从CDN加载monaco-editor 。 

< template >
  < div ref = " containerRef " ></ div >
</ template >

< script lang="ts" setup>
import { ref , onUnmounted , watchEffect , nextTick } from ' vue '
import { useMonaco } from ' @guolao/vue-monaco-editor '

const containerRef = ref ()
const { monacoRef, unload } = useMonaco ()

// watch once
const stop = watchEffect (() => {
  if ( monacoRef . value && containerRef . value ) {
    nextTick (() => stop ())
    monacoRef . value . editor . create ( containerRef . value , { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted (() => ! monacoRef . value && unload ())
</ script >

CDN

vue-monaco-editor使用 @Monaco-editor/Loader从CDN加载monaco-editor （ loader的加载过程是异步的）。

loader的配置是全局的，只能配置一次。 

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} ) 
 import { loader } from "@guolao/vue-monaco-editor"

// loaded from CDN
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

// configurable for different languages
loader . config ( { "vs/nls" : { availableLanguages : { "*" : "de" } } } )

// or
loader . config ( {
  paths : {
    vs : "..." ,
  } ,
  "vs/nls" : {
    availableLanguages : {
      "*" : "de" ,
    } ,
  } ,
} )

NPM软件包

如果您仍然想从node_modules导入monaco-editor文件并将其捆绑到代码中（不使用远程加载），则需要使用捆绑工具。 

 import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// loaded monaco-editor from `node_modules`
loader . config ( { monaco } )

Vite

如果您使用的是vite ，则需要执行此操作（有关详细信息，请参见＃1791（评论）。 

 import { loader } from "@guolao/vue-monaco-editor"

import * as monaco from "monaco-editor"
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"

self . MonacoEnvironment = {
  getWorker ( _ , label ) {
    if ( label === "json" ) {
      return new jsonWorker ( )
    }
    if ( label === "css" || label === "scss" || label === "less" ) {
      return new cssWorker ( )
    }
    if ( label === "html" || label === "handlebars" || label === "razor" ) {
      return new htmlWorker ( )
    }
    if ( label === "typescript" || label === "javascript" ) {
      return new tsWorker ( )
    }
    return new editorWorker ( )
  }
}

loader . config ( { monaco } )

滚动

如果您使用的是Rollup ，则可以使用社区提供的插件汇总 - plugin-monaco-editor。

webpack

如果您使用的是webpack ， monaco-editor正式提供了一个名为Monaco-editor-webpack-Plugin的webpack插件，您可以安装和使用。

灵感

由于以下项目的灵感，摩纳哥的成为可能：

  • 摩纳哥装载机
  • 摩纳哥反应

执照

麻省理工学院

展开
附加信息
相关应用
为您推荐
相关资讯 全部