Unduh monaco vue - Unduh Kode Sumber monaco vue

monaco-vue

Gunakan monaco-editor yang dimuat dari CDN di Vue 2 & 3, tidak perlu bundling.

Bahasa Inggris | 简体中文

Mengapa

monaco-editor tidak mendukung ESM dengan sangat baik, yang menghasilkan file besar saat kode dibundel.

Tetapi tim resmi telah menulis loader untuk malas memuat file editor dari jarak jauh, sehingga kami dapat memuat file dari CDN untuk menggunakannya.

Jika Anda masih ingin mengimpor file monaco-editor dari node_modules dan menggabungkannya ke dalam kode Anda (tanpa menggunakan pemuatan jarak jauh), Anda perlu menggunakan alat bundling. Lihat di sini.

Instalasi

npm i @guolao/vue-monaco-editor

VUE <= 2.6.14 membutuhkan @vue/komposisi-API untuk diinstal.

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

Jangan lupa untuk mendaftarkan plugin @vue/composition-api !

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

Vue . use ( VueCompositionAPI )

Tentu saja, Anda juga dapat menggunakan UNPKG.

Penggunaan

Pendaftaran Global

 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'
  } ,
} )

Pendaftaran lokal

 // 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 } ,
}

Dan kemudian, gunakan.

Editor

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

Editor diff

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

Alat peraga & acara & slot

Editor

Nama	Jenis	Bawaan	Keterangan	komentar
nilai	`string`		Nilai model saat ini, dapat menggunakan `v-model:value`	`v-model:value`
bahasa	`string`		semua bahasa dari model saat ini	Bahasa yang didukung oleh `monaco-editor` , lihat di sini
jalur	`string`		jalur ke model saat ini
DefaultValue	`string`		nilai default dari model saat ini
DefaultLanguage	`string`		Bahasa default dari model saat ini	Bahasa yang didukung oleh tampilan `monaco-editor` di sini
DefaultPath	`string`		Jalur default dari model saat ini	`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
tema	`vs` \| `vs-dark`	`vs`	Tema untuk editor Monako.
garis	`number`		Jumlah garis yang harus dilompat ke
opsi	`object`	`{}`	IstandaloneEditorConstructionOptions
Layanan overrideS	`object`	`{}`	IEditerOverridServices
SaveViewState	`boolean`	`true`	Simpan keadaan tampilan model (posisi gulir, dll.) Setelah perubahan model	`path` unik perlu dikonfigurasi untuk setiap model
lebar	`number` \| `string`	`100%`	Lebar wadah
tinggi	`number` \| `string`	`100%`	tinggi kontainer
ClassName	`string`		Nama kelas wadah dalam
@Beforemount	`(monaco: Monaco) => void`		Jalankan sebelum instance editor dibuat (jangan gunakan `@before-mount` di vue2, detail)
@gunung	`(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`		mengeksekusi setelah instance editor telah dibuat
@mengubah	`(value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void`		Jalankan saat perubahan nilai yang diubah
@mengesahkan	`(markers: monaco.editor.IMarker[]) => void`		Jalankan saat kesalahan sintaksis terjadi	`monaco-editor` Mendukung Tampilan Bahasa yang diperiksa sintaks di sini
`#default`	`slot`	`'loading...'`	status pemuatan	Saat memuat file dari CDN, menampilkan status pemuatan akan lebih ramah
`#failure`	`slot`	`'load failed'`	status kegagalan	Contoh: Kesalahan jaringan CDN

Editor diff

Nama	Jenis	Bawaan	Keterangan
asli	`string`		Nilai sumber asli (editor kiri)
dimodifikasi	`string`		Nilai sumber yang dimodifikasi (editor kanan)
bahasa	`string`		Bahasa untuk kedua model - asli dan dimodifikasi (semua bahasa yang didukung oleh monaco -editor)
bahasa asli	`string`		Prop ini memberi Anda kesempatan untuk menentukan bahasa sumber asli secara terpisah, jika tidak, itu akan mendapatkan nilai properti bahasa.
ModifiedLanguage	`string`		Prop ini memberi Anda kesempatan untuk menentukan bahasa sumber yang dimodifikasi secara terpisah, jika tidak, itu akan mendapatkan nilai properti bahasa.
OriginalModelpath	`string`		Jalur untuk model "asli". Akan disahkan sebagai argumen ketiga untuk `.createModel` Metode - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))`
ModifiedModelPath	`string`		Jalur untuk model "dimodifikasi". Akan disahkan sebagai argumen ketiga untuk `.createModel` Metode - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))`
tema	`vs` \| `vs-dark` \| `string`	`vs` ( `vs` tema sama dengan tema `light` )	Tema untuk editor Monako. Tentukan tema baru oleh `monaco.editor.defineTheme` .
opsi	`object`	`{}`	ISTANDALONEDIFFEDITORCONSTRUCTIONOPTIONS
lebar	`number` \| `string`	`100%`	Lebar wadah
tinggi	`number` \| `string`	`100%`	Tinggi kontainer
ClassName	`string`		Nama kelas wadah dalam
@Beforemount	`(monaco: Monaco) => void`		Jalankan sebelum instance editor dibuat (jangan gunakan `@before-mount` di vue2, detail)
@gunung	`(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void`		Mengeksekusi setelah instance editor telah dibuat
`#default`	`slot`	`'loading...'`	Status pemuatan
`#failure`	`slot`	`'load failed'`	Status kegagalan

Kait

useMonaco gunakan @monaco-editor/loader untuk memuat monaco-editor dari CDN.

< 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 menggunakan @monaco-editor/loader untuk memuat monaco-editor dari CDN (proses pemuatan loader tidak sinkron).

Konfigurasi loader bersifat global, hanya untuk dikonfigurasi sekali.

 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" ,
    } ,
  } ,
} )

Paket NPM

Jika Anda masih ingin mengimpor file monaco-editor dari node_modules dan menggabungkannya ke dalam kode Anda (tanpa menggunakan pemuatan jarak jauh), Anda perlu menggunakan alat bundling.

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

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

Vite

Jika Anda menggunakan vite , Anda perlu melakukan ini (lihat #1791 (komentar) untuk detailnya).

 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

Jika Anda menggunakan Rollup , Anda dapat menggunakan komunitas yang disediakan plugin rollup-plugin-monaco-editor.

Webpack

Jika Anda menggunakan webpack , monaco-editor secara resmi menyediakan plugin webpack yang disebut Monaco-Editor-Webpack-Plugin, yang dapat Anda instal dan gunakan.