vue monaco editor

Vue-Monaco-Editor

سار هذا لا يتم الحفاظ عليه !!!!

مكون محرر موناكو VUE

استنادا إلى محرر React Monaco

يثبت

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
تغيير	الرقم (MS)	0	الخانق codeChange EMIT
SRCPATH	خيط	""	انظر WebPack استخدام أدناه
المحرر	هدف	اندمجت مع الافتراضات أدناه	انظر خيارات محرر موناكو

خيارات المحرر الافتراضية

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

أحداث المكون

هذه الأحداث متوفرة لمكون الوالدين

حدث	عودة	وصف
مثبت	editor [مثيل المحرر]	انبعث عندما يكون المحرر
CodeChange	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 ( ) ) ;
    }
  }
} ; 

استخدام حزمة الويب

بشكل افتراضي ، يتم تحميل 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' ,
      }
    ] )
  ]
} ;

ثم ، حدد مسار دليل البناء في دعم srcPath . انظر src/App.vue للحصول على مثال.

استخدام dev

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

تحرير src/App.vue