monaco vue

موناكو

استخدم monaco-editor المحملة من CDN في Vue 2 و 3 ، لا حاجة إلى التجميع.

الإنجليزية | 简体中文

لماذا

لا يدعم monaco-editor ESM جيدًا ، مما يؤدي إلى ملفات كبيرة عندما يتم تجميع الكود.

لكن الفريق الرسمي قد كتب محملًا إلى ملفات تحميل كسول للمحرر عن بُعد ، حتى نتمكن من تحميل الملفات من 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 هنا
DefaultPath	string		المسار الافتراضي للنموذج الحالي	monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))
سمة	vs | vs-dark	vs	موضوع محرر موناكو.
خط	number		عدد الخطوط التي تقفز إليها
خيارات	object	{}	IstandalOneeditorConstructionOptions
الخدمات المفرطة	object	{}	iditoroverrideservices
SaveViewState	boolean	true	احفظ حالة العرض للنموذج (موضع التمرير ، إلخ) بعد تغيير النموذج	يجب تكوين path فريد لكل نموذج
عرض	number | string	100%	عرض الحاوية
ارتفاع	number | string	100%	ارتفاع الحاوية
اسم الفصل	string		اسم فئة الحاوية الداخلية
beforeMount	(monaco: Monaco) => void		تنفيذ قبل إنشاء مثيل المحرر (لا تستخدم @before-mount في Vue2 ، التفاصيل)
@جبل	(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void		تنفيذ بعد إنشاء مثيل المحرر
@يتغير	(value: string | undefined, event: monaco.editor.IModelContentChangedEvent) => void		تنفذ عندما تغير القيمة المتغيرة
validate	(markers: monaco.editor.IMarker[]) => void		تنفيذ عند حدوث خطأ في بناء الجملة	يدعم monaco-editor طريقة عرض اللغات التي يتم فحصها هنا
#default	slot	'loading...'	حالة التحميل	عند تحميل الملفات من CDN ، سيكون عرض حالة التحميل أكثر ودية
#failure	slot	'load failed'	حالة الفشل	مثال: خطأ شبكة CDN

محرر فرق

اسم	يكتب	تقصير	وصف
إبداعي	string		قيمة المصدر الأصلية (المحرر الأيسر)
معدل	string		قيمة المصدر المعدلة (المحرر الأيمن)
لغة	string		لغة لكلا النموذجين - الأصلي والمعدل (جميع اللغات التي يدعمها موناكو إيرتور)
OriginAllangue	string		يمنحك هذا الدعامة الفرصة لتحديد لغة المصدر الأصلي بشكل منفصل ، وإلا ، فإنه سيحصل على قيمة خاصية اللغة.
ModifiedLanguage	string		يمنحك هذا الدعامة الفرصة لتحديد لغة المصدر المعدل بشكل منفصل ، وإلا ، فإنه سيحصل على قيمة خاصية اللغة.
OriginalModelPath	string		مسار النموذج "الأصلي". سيتم تمريرها كوسيطة ثالثة إلى .createModel createmodel - monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))
ModifiedModelPath	string		مسار النموذج "المعدل". سيتم تمريرها كوسيطة ثالثة إلى .createModel createmodel - monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))
سمة	vs | vs-dark | string	vs ( vs السمة يساوي موضوع light )	موضوع محرر موناكو. تحديد موضوعات جديدة بواسطة monaco.editor.defineTheme .
خيارات	object	{}	istandalonediffeditorconstructionoptions
عرض	number | string	100%	عرض الحاوية
ارتفاع	number | string	100%	ارتفاع الحاوية
اسم الفصل	string		اسم فئة الحاوية الداخلية
beforeMount	(monaco: Monaco) => void		تنفيذ قبل إنشاء مثيل المحرر (لا تستخدم @before-mount في Vue2 ، التفاصيل)
@جبل	(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 Use @monaco-reditor/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 ، فأنت بحاجة إلى القيام بذلك (انظر #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-Plugin-Monaco-Editor.

WebPack

إذا كنت تستخدم webpack ، monaco-editor يوفر رسميًا مكونًا إضافيًا webpack يسمى Monaco-Editor-Webpack-Plugin ، والذي يمكنك تثبيته واستخدامه.

إلهام

أصبح موناكوفو ممكنًا بفضل الإلهام من المشاريع التالية:

• Monaco-Loader
• موناكو التفاعل

رخصة

معهد ماساتشوستس للتكنولوجيا