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 로 강조 표시되는 선
changethrottle	번호 (MS)	0	스로틀 codeChange 방출
srcpath	끈	""	아래 웹 팩 사용을 참조하십시오
편집물	물체	아래의 기본값과 병합되었습니다	모나코 편집자 옵션을 참조하십시오

편집기 기본 옵션

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는 require 사용하여 CDN에서 비동기로로드됩니다. Webpack과 함께 monaco-editor 의 로컬 사본을 사용하려면 빌드 디렉토리에 종속성을 노출시켜야합니다.

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 prop에서 빌드 디렉토리 경로를 지정하십시오. 예를 들어 src/App.vue 참조하십시오.

Dev 사용

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

src/App.vue 편집