vue monaco editor

Vue-Monaco-Editor

!!!! Это не поддерживается !!!!

Monaco Editor Vue Component

На основе редактора 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 излучает
Srcpath	Нить	""	См. Webpack Использование ниже
редактор	Объект	Объединен с по умолчанию ниже	Смотрите варианты редактора Monaco

Параметры по умолчанию редактора

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' ,
      }
    ] )
  ]
} ;

Затем укажите путь каталога сборки в srcPath Pro. См src/App.vue для примера.

DEV Использование

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

РЕДАКТИРОВАТЬ src/App.vue