monaco vue

โมนาโก-วู

ใช้ monaco-editor ที่โหลดจาก CDN ใน Vue 2 & 3 ไม่จำเป็นต้องรวมกลุ่ม

ภาษาอังกฤษ | 简体中文

ทำไม

monaco-editor ไม่รองรับ ESM ได้ดีมากซึ่งส่งผลให้มีไฟล์ขนาดใหญ่เมื่อรวมรหัส

แต่ทีมอย่างเป็นทางการได้เขียนตัวโหลดไปยังไฟล์ Lazy Load ของตัวแก้ไขจากระยะไกลดังนั้นเราสามารถโหลดไฟล์จาก CDN เพื่อใช้งานได้

หากคุณยังต้องการนำเข้าไฟล์ monaco-editor จาก node_modules และรวมเข้ากับรหัสของคุณ (โดยไม่ต้องใช้การโหลดระยะไกล) คุณจะต้องใช้เครื่องมือการรวมกัน ดูที่นี่

การติดตั้ง

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 ต้องการ @vue/composition-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		เส้นทางไปยังรุ่นปัจจุบัน
defaultValue	string		ค่าเริ่มต้นของรุ่นปัจจุบัน
defaultLanguage	string		ภาษาเริ่มต้นของรุ่นปัจจุบัน	ภาษาที่สนับสนุนโดย monaco-editor View ที่นี่
DefaultPath	string		เส้นทางเริ่มต้นของรุ่นปัจจุบัน	monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))
ธีม	vs | vs-dark	vs	ชุดรูปแบบสำหรับบรรณาธิการโมนาโก
เส้น	number		จำนวนบรรทัดที่จะข้ามไปที่
ตัวเลือก	object	{}	istandaloneeditorConstructionOptions
overrideservices	object	{}	ieditorOverrideservices
SaveViewState	boolean	true	บันทึกสถานะมุมมองของโมเดล (ตำแหน่งเลื่อน ฯลฯ ) หลังจากการเปลี่ยนแปลงแบบจำลอง	ต้องกำหนด path ที่ไม่ซ้ำกันสำหรับแต่ละรุ่น
ความกว้าง	number | string	100%	ความกว้างของภาชนะ
ความสูง	number | string	100%	ความสูงของภาชนะ
ชื่อชั้นเรียน	string		ชื่อคลาสคอนเทนเนอร์ด้านใน
@BeForeMount	(monaco: Monaco) => void		ดำเนินการก่อนที่อินสแตนซ์ของตัวแก้ไขจะถูกสร้างขึ้น (อย่าใช้ @before-mount ใน Vue2 รายละเอียด)
@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		ภาษาสำหรับทั้งสองรุ่น - ต้นฉบับและแก้ไข (ทุกภาษาที่สนับสนุนโดย Monaco -editor)
ภาษาต้นกำเนิด	string		เสานี้เปิดโอกาสให้คุณระบุภาษาของแหล่งกำเนิดดั้งเดิมแยกกันมิฉะนั้นจะได้รับมูลค่าของคุณสมบัติภาษา
ModifiedLanguage	string		เสานี้เปิดโอกาสให้คุณระบุภาษาของแหล่งที่มาที่แก้ไขแยกกันมิฉะนั้นจะได้รับมูลค่าของคุณสมบัติภาษา
OriginalModelPath	string		เส้นทางสำหรับรุ่น "ดั้งเดิม" จะถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สามไปยัง .createModel Method - monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))
ModifiedModelPath	string		เส้นทางสำหรับโมเดล "แก้ไข" จะถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สามไปยัง. .createModel Method - monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))
ธีม	vs | vs-dark | string	vs ( vs ธีมเท่ากับธีม light )	ชุดรูปแบบสำหรับบรรณาธิการโมนาโก กำหนดธีมใหม่โดย monaco.editor.defineTheme
ตัวเลือก	object	{}	istandalonediffeditorConstructionos
ความกว้าง	number | string	100%	ความกว้างของภาชนะ
ความสูง	number | string	100%	ความสูงของภาชนะ
ชื่อชั้นเรียน	string		ชื่อคลาสคอนเทนเนอร์ด้านใน
@BeForeMount	(monaco: Monaco) => void		ดำเนินการก่อนที่อินสแตนซ์ของตัวแก้ไขจะถูกสร้างขึ้น (อย่าใช้ @before-mount ใน Vue2 รายละเอียด)
@mount	(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void		ดำเนินการหลังจากสร้างอินสแตนซ์ของตัวแก้ไขแล้ว
#default	slot	'loading...'	สถานะการโหลด
#failure	slot	'load failed'	สถานะความล้มเหลว

ตะขอ

useMonaco ใช้ @monaco-editor/loader เพื่อโหลด monaco-editor จาก 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 ใช้ @monaco-editor/loader เพื่อโหลด monaco-editor จาก CDN (กระบวนการโหลดของ 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

หากคุณยังต้องการนำเข้าไฟล์ monaco-editor จาก node_modules และรวมเข้ากับรหัสของคุณ (โดยไม่ต้องใช้การโหลดระยะไกล) คุณจะต้องใช้เครื่องมือการรวมกัน

 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 คุณสามารถใช้ชุมชนที่ให้บริการปลั๊กอิน Rollup-Plugin-Monaco-editor

เว็บแพ็ค

หากคุณใช้ webpack monaco-editor ให้ปลั๊กอิน webpack อย่างเป็นทางการที่เรียกว่า Monaco-Editor-Webpack-Plugin ซึ่งคุณสามารถติดตั้งและใช้งานได้

แรงบันดาลใจ

Monacovue เป็นไปได้ด้วยแรงบันดาลใจจากโครงการต่อไปนี้:

• โมนาโก-โหลด
• การตอบโต้แบบโมนาโก

ใบอนุญาต

มิกซ์