首頁>建站資源>其他資源
下載

摩納哥訴訟

使用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插件，您可以安裝和使用。

靈感

由於以下項目的靈感，摩納哥的成為可能：

  • 摩納哥裝載機
  • 摩納哥反應

執照

麻省理工學院

展開
附加信息
相關應用
爲您推薦
相關資訊 全部