تنزيل vue monaco - تنزيل رمز المصدر vue monaco

vue monaco

موارد أخرى

v1.2.2

تنزيل

Vue-Monaco

Monaco Editor هو محرر التعليمات البرمجية الذي يعود إلى الكود ، وهو الآن متاح كمكون VUE <MonacoEditor> بفضل هذا المشروع.

ثَبَّتَ

npm install vue-monaco

أو

yarn add vue-monaco

الاستخدام

استخدم إصدار ESM مع WebPack

استخدم Monaco-Editor-Webpack-Plugin:

 // webpack.config.js
const MonacoEditorPlugin = require ( 'monaco-editor-webpack-plugin' )

module . exports = {
  plugins : [
    new MonacoEditorPlugin ( {
      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      // Include a subset of languages support
      // Some language extensions like typescript are so huge that may impact build performance
      // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
      // Languages are loaded on demand at runtime
      languages : [ 'javascript' , 'css' , 'html' , 'typescript' ]
    } )
  ]
}

ثم استخدم المكون:

< template >
  < MonacoEditor class = " editor " v-model = " code " language = " javascript " />
</ template >

< script >
import MonacoEditor from ' vue-monaco '

export default {
  components : {
    MonacoEditor
  },

  data () {
    return {
      code : ' const noop = () => {} '
    }
  }
}
</ script >

< style >
.editor {
  width : 600 px ;
  height : 800 px ;
}
</ style >

استخدم إصدار AMD

 <!DOCTYPE html >
< html >
  < head >
    < meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
    < meta http-equiv =" Content-Type " content =" text/html;charset=utf-8 " />
  </ head >
  < body >
    < div id =" app " > </ div >

    < script src =" https://unpkg.com/vue " > </ script >
    < script src =" https://unpkg.com/vue-monaco " > </ script >
    < script src =" monaco-editor/min/vs/loader.js " > </ script >
    < script >
      require . config ( { paths : { vs : 'monaco-editor/min/vs' } } )

      new Vue ( {
        el : '#app' ,
        template : `
          <monaco-editor
            style="width:800px;height:600px;border:1px solid grey"
            v-model="code" 
            language="javascript" 
            :amdRequire="amdRequire"
          />` ,
        data : {
          code : 'const noop = () => {}'
        } ,
        methods : {
          amdRequire : require
        }
      } )
    </ script >
  </ body >
</ html >

عند تحميل موناكو محرر من CDN ، تحتاج إلى تغيير require.config لتبدو مثل هذا:

 require . config ( { paths : { vs : 'http://www.mycdn.com/monaco-editor/min/vs' } } )

// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script
window . MonacoEnvironment = {
  getWorkerUrl : function ( workerId , label ) {
    return `data:text/javascript;charset=utf-8, ${ encodeURIComponent ( `
        self.MonacoEnvironment = {
          baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
        };
        importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');` ) } `
  }
}

الدعائم

options : الحجة الثانية لـ monaco.editor.create .
value : اختصار لتعيين options.value . القيمة.
theme : اختصار لتعيين options.theme .
language : اختصار لتعيين options.language اللغة.
amdRequire : تحميل موناكو-محرر باستخدام وظيفة متطلبة على طراز AMD.
diffEditor : تشير boolean إلى أن هذا هو diffeditor ، false بشكل افتراضي.

أحداث المكون

`editorWillMount`

params:
- monaco : monaco module

ودعا قبل تصاعد المحرر.

`editorDidMount`

params:
- editor : IStandaloneCodeEditor للمحرر العادي ، IStandaloneDiffEditor لمحرر Diff.

ودعا عندما يتم تثبيت المحرر.

`change`

يتم تحديث قيمة المحرر.

params:
- value : قيمة المحرر الجديدة.
- event : event من onDidChangeModelContent .

أحداث المحرر

يمكنك الاستماع إلى أحداث المحرر مباشرة مثل هذا:

< template >
  < MonacoEditor v-model = " code " @editorDidMount = " editorDidMount " />
</ template >

< script >
export default {
  methods : {
    editorDidMount ( editor ) {
      // Listen to `scroll` event
      editor . onDidScrollChange ( e => {
        console . log (e)
      })
    }
  },

  data () {
    return {
      code : ' ... '
    }
  }
}
</ script >

الرجوع إلى هذه الصفحة لجميع أحداث المحرر.

طُرق

getEditor(): IStandaloneCodeEditor : إعادة مثيل المحرر.

استخدم ref للتفاعل مع مكون MonacoEditor من أجل الوصول إلى الطرق: <MonacoEditor ref="editor" /> ، this.$refs.editor.getEditor() سيكون متاحًا.

استخدم Diffeditor

استخدم Prop diffEditor للإشارة إلى أن هذا هو Diffeditor ، استخدم Prop original لتعيين المحتوى للمحرر الأصلي ، استخدم value Prop لتعيين المحتوى للمحرر المعدل.

< MonacoEditor
  language="javascript"
  : diffEditor = " true "
  : value = " code "
  : original = " originalCode "
/>

في هذه الحالة ، يقوم getEditor() بإرجاع مثيل IStandaloneDiffEditor ، بينما يمكنك استخدام getModifiedEditor() للحصول على المحرر المعدل وهو مثيل IStandaloneCodeEditor .