vue monaco editor

Vue-Monaco-editor

- นี่ไม่ได้รับการดูแล !!!!

Monaco Editor Vue Component

ขึ้นอยู่กับ React Monaco Editor

การตั้งค่า

npm install vue-monaco-editor --save

ใช้ Vue อย่างง่าย

 import MonacoEditor from 'vue-monaco-editor'

// use in component
export default {
  components : {
    MonacoEditor
  }
} 

อุปกรณ์ประกอบฉากส่วนประกอบ

ตัวเลือก	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ภาษา	สาย	javascript
ความสูง	หมายเลข/สตริง	100%
ความกว้าง	หมายเลข/สตริง	100%
รหัส	สาย	// code n	รหัสเริ่มต้นที่จะแสดง
ธีม	สาย	vs-dark	vs, hc-black หรือ vs-dark
ที่ได้เน้น	อาร์เรย์ [วัตถุ]	[{ number: 0, class: ''}]	บรรทัดที่จะเน้นด้วยตัวเลขและ .classes
Changethrottle	หมายเลข (MS)	0	เค้น codeChange Emit
srcpath	สาย	""	ดู Webpack ใช้ ด้านล่าง
EditorOptions	วัตถุ	ผสานกับค่าเริ่มต้นด้านล่าง	ดูตัวเลือกตัวแก้ไขโมนาโก

ตัวเลือกเริ่มต้นของตัวแก้ไข

defaults: {
  selectOnLineNumbers : true ,
  roundedSelection : false ,
  readOnly : false ,
  cursorStyle : 'line' ,
  automaticLayout : false ,
  glyphMargin : true
} 

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

กิจกรรมเหล่านี้มีให้สำหรับองค์ประกอบหลัก

เหตุการณ์	ผลตอบแทน	คำอธิบาย
ติดตั้ง	editor [อินสแตนซ์ตัวแก้ไข]	ปล่อยออกมาเมื่อบรรณาธิการติดตั้ง
รหัส	editor [อินสแตนซ์ตัวแก้ไข]	ปล่อยออกมาเมื่อรหัสมีการเปลี่ยนแปลง

ตัวอย่าง

การใช้งานส่วนประกอบ

< MonacoEditor
    height="600"
    language="typescript"
    : code = " code "
    : editorOptions = " options "
    @ mounted = " onMounted "
    @ codeChange = " onCodeChange "
    >
</ MonacoEditor >

พ่อแม่

 module . exports = {
  components : {
    Monaco
  } ,
  data ( ) {
    return {
      code : '// Type away! n' ,
      options : {
        selectOnLineNumbers : false
      }
    } ;
  } ,
  methods : {
    onMounted ( editor ) {
      this . editor = editor ;
    } ,
    onCodeChange ( editor ) {
      console . log ( editor . getValue ( ) ) ;
    }
  }
} ; 

ใช้ webpack

โดยค่าเริ่มต้น Monaco-editor จะถูกโหลดจาก CDN แบบอะซิงโครไนซ์โดยใช้ require ในการใช้สำเนาของ monaco-editor กับ WebPack เราจำเป็นต้องเปิดเผยการพึ่งพาในไดเรกทอรีบิลด์ของเรา:

npm install copy-webpack-plugin --save-dev

เพิ่มสิ่งนี้ลงใน webpack.config.js ของคุณ:

 const CopyWebpackPlugin = require ( 'copy-webpack-plugin' ) ;
module . exports = {
  plugins : [
    new CopyWebpackPlugin ( [
      {
        from : 'node_modules/monaco-editor/min/vs' ,
        to : 'vs' ,
      }
    ] )
  ]
} ;

จากนั้นระบุเส้นทางการสร้างไดเรกทอรีใน prop srcPath ดูตัวอย่าง src/App.vue

การใช้งาน dev

 git clone [this repo] .
npm install
npm run dev

แก้ไข src/App.vue