ดาวน์โหลด vue monaco - vue monaco Source Source Download

vue monaco

ทรัพยากรอื่นๆ

v1.2.2

ดาวน์โหลด

Vue-Monaco

Monaco Editor เป็นตัวแก้ไขรหัสที่ Powers Vs Code ตอนนี้มีให้บริการเป็นองค์ประกอบ 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 >

เมื่อโหลด Monaco-editor จาก 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 : โหลด Monaco-editor โดยใช้ฟังก์ชั่นที่กำหนดสไตล์ AMD
diffEditor : boolean ระบุว่านี่เป็น diffreditor, false โดยค่าเริ่มต้น

เหตุการณ์ส่วนประกอบ

`editorWillMount`

params:
- monaco : monaco module

เรียกก่อนติดตั้งบรรณาธิการ

`editorDidMount`

params:
- editor : IStandaloneCodeEditor สำหรับ Editor ปกติ, IStandaloneDiffEditor สำหรับ Diff Editor

เรียกว่าเมื่อติดตั้งบรรณาธิการ

`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 เพื่อระบุว่านี่เป็น diffreditor ใช้เสา original เพื่อตั้งค่าเนื้อหาสำหรับตัวแก้ไขดั้งเดิมให้ใช้ Prop value เพื่อตั้งค่าเนื้อหาสำหรับตัวแก้ไขที่แก้ไขแล้ว

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

ในกรณีนี้ getEditor() ของส่วนประกอบจะส่งคืนอินสแตนซ์ IStandaloneDiffEditor ในขณะที่คุณสามารถใช้ getModifiedEditor() เพื่อรับตัวแก้ไขที่แก้ไขแล้วซึ่งเป็นอินสแตนซ์ IStandaloneCodeEditor