monaco vue 다운로드 -Monaco monaco vue 소스 코드 다운로드

모나코-뷰

VUE 2 & 3에서 CDN에서 로딩 된 monaco-editor 사용하여 번들링 할 필요가 없습니다.

영어 | 简体中文

왜

monaco-editor ESM을 잘 지원하지 않으므로 코드가 번들로 묶을 때 큰 파일이 발생합니다.

그러나 공식 팀은 편집자의 게으른로드 파일에 대한 로더를 원격으로 작성하여 CDN의 파일을로드하여 사용할 수 있습니다.

여전히 node_modules 에서 monaco-editor 파일을 가져 와서 원격로드를 사용하지 않고 코드에 묶으려면 번들링 도구를 사용해야합니다. 여기를 참조하십시오.

설치

npm i @guolao/vue-monaco-editor

vue <= 2.6.14 는 @vue/composition-api를 설치해야합니다.

npm i @guolao/vue-monaco-editor @vue/composition-api

@vue/composition-api 플러그인을 등록하는 것을 잊지 마십시오!

 import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue . use ( VueCompositionAPI )

물론 UNMKG를 사용할 수도 있습니다.

용법

글로벌 등록

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

현지 등록

 // main.ts
import { loader } from '@guolao/vue-monaco-editor'
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' ,
  } ,
} )

// editor.vue
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
export default {
  components : { VueMonacoEditor } ,
}

그런 다음 사용하십시오.

편집자

< template >
  < vue-monaco-editor
    v-model:value = " code "
    theme = " vs-dark "
    :options = " MONACO_EDITOR_OPTIONS "
    @mount = " handleMount "
  />
</ template >

< script lang="ts" setup>
import { ref , shallowRef } from ' vue '

const MONACO_EDITOR_OPTIONS = {
  automaticLayout: true ,
  formatOnType: true ,
  formatOnPaste: true ,
}

const code = ref ( ' // some code... ' )
const editor = shallowRef ()
const handleMount = editorInstance => ( editor . value = editorInstance )

// your action
function formatCode() {
  editor . value ?. getAction ( ' editor.action.formatDocument ' ). run ()
}
</ script >

DIFF 편집기

< template >
  < vue-monaco-diff-editor
    theme = " vs-dark "
    original = " // the original code "
    modified = " // the modified code "
    language = " javascript "
    :options = " OPTIONS "
    @mount = " handleMount "
  />
</ template >

< script lang="ts" setup>
import { ref , shallowRef } from ' vue '

const OPTIONS = {
  automaticLayout: true ,
  formatOnType: true ,
  formatOnPaste: true ,
  readOnly: true ,
}

const diffEditor = shallowRef ()
const handleMount = diffEditorInstance => ( diffEditor . value = diffEditorInstance )

// get the original value
function getOriginalValue() {
  return diffEditor . value . getOriginalEditor (). getValue ()
}

// get the modified value
function getModifiedValue() {
  return diffEditor . value . getModifiedEditor (). getValue ()
}
</ script >

소품 및 이벤트 및 슬롯

편집자

이름	유형	기본	설명	주목
값	`string`		현재 모델의 값은 `v-model:value` 사용할 수 있습니다	`v-model:value`
언어	`string`		현재 모델의 모든 언어	`monaco-editor` 가 지원하는 언어, 여기를 참조하십시오
길	`string`		현재 모델로가는 길
DefaultValue	`string`		현재 모델의 기본값
DefaultLanguage	`string`		현재 모델의 기본 언어	`monaco-editor` View가 지원하는 언어는 여기를 참조하십시오
기본 경로	`string`		현재 모델의 기본 경로	`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
주제	`vs` \| `vs-dark`	`vs`	모나코 편집자의 테마.
선	`number`		점프 할 라인 수
옵션	`object`	`{}`	istandaloneeditorconstructionptions
OverrideServices	`object`	`{}`	ieditor -OverrideServices
SaveViewState	`boolean`	`true`	모델이 변경된 후 모델의 상태 (스크롤 위치 등)를 저장하십시오.	각 모델에 대해 고유 한 `path` 구성해야합니다.
너비	`number` \| `string`	`100%`	컨테이너 너비
키	`number` \| `string`	`100%`	컨테이너 높이
클래스 이름	`string`		내부 컨테이너 클래스 이름
@beforemount	`(monaco: Monaco) => void`		편집기 인스턴스가 생성되기 전에 실행 (vue2에서 `@before-mount` 사용하지 마십시오)
@산	`(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`		편집기 인스턴스가 작성된 후 실행하십시오
@변화	`(value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void`		변경된 값이 변경되면 실행하십시오
@Validate	`(markers: monaco.editor.IMarker[]) => void`		구문 오류가 발생하면 실행하십시오	`monaco-editor` 여기에서 구문 확인 언어보기를 지원합니다
`#default`	`slot`	`'loading...'`	로드 상태	CDN에서 파일을로드 할 때 로딩 상태를 표시하는 것이 더 친숙합니다.
`#failure`	`slot`	`'load failed'`	실패 상태	예 : CDN 네트워크 오류

DIFF 편집기

이름	유형	기본	설명
원래의	`string`		원래 소스 값 (왼쪽 편집기)
수정	`string`		수정 된 소스 값 (오른쪽 편집기)
언어	`string`		두 모델을위한 언어 - 독창적이고 수정 된 (Monaco -Editor가 지원하는 모든 언어)
원래의 언어	`string`		이 소품은 원본 소스의 언어를 별도로 지정할 수있는 기회를 제공합니다. 그렇지 않으면 언어 속성의 가치를 얻을 수 있습니다.
수정 된 언어	`string`		이 소품은 수정 된 소스의 언어를 별도로 지정할 수있는 기회를 제공합니다. 그렇지 않으면 언어 속성의 가치를 얻을 수 있습니다.
OriginalModelPath	`string`		"원래"모델의 경로. `.createModel` 메소드 `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))` 에 세 번째 인수로 전달됩니다.
ModifiedModelPath	`string`		"수정 된"모델의 경로. `.createModel` 메소드 `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))` 에 세 번째 인수로 전달됩니다.
주제	`vs` \| `vs-dark` \| `string`	`vs` ( `vs` 테마는 `light` 테마와 같습니다)	모나코 편집자의 테마. `monaco.editor.defineTheme` 에 의해 새로운 테마를 정의하십시오.
옵션	`object`	`{}`	istandalonediffeditorconstructionptions
너비	`number` \| `string`	`100%`	컨테이너 너비
키	`number` \| `string`	`100%`	컨테이너 높이
클래스 이름	`string`		내부 컨테이너 클래스 이름
@beforemount	`(monaco: Monaco) => void`		편집기 인스턴스가 생성되기 전에 실행 (vue2에서 `@before-mount` 사용하지 마십시오)
@산	`(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void`		편집기 인스턴스가 작성된 후 실행하십시오
`#default`	`slot`	`'loading...'`	로드 상태
`#failure`	`slot`	`'load failed'`	실패 상태

후크

useMonaco @monaco-editor/loader를 사용하여 CDN에서 monaco-editor 로드합니다.

< template >
  < div ref = " containerRef " ></ div >
</ template >

< script lang="ts" setup>
import { ref , onUnmounted , watchEffect , nextTick } from ' vue '
import { useMonaco } from ' @guolao/vue-monaco-editor '

const containerRef = ref ()
const { monacoRef, unload } = useMonaco ()

// watch once
const stop = watchEffect (() => {
  if ( monacoRef . value && containerRef . value ) {
    nextTick (() => stop ())
    monacoRef . value . editor . create ( containerRef . value , { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted (() => ! monacoRef . value && unload ())
</ script >

cdn

vue-monaco-editor @monaco-editor/loader를 사용하여 CDN에서 monaco-editor 로드합니다 ( loader 의 로딩 과정은 비동기 적입니다).

loader 의 구성은 글로벌이며 한 번만 구성해야합니다.

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

 import { loader } from "@guolao/vue-monaco-editor"

// loaded from CDN
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

// configurable for different languages
loader . config ( { "vs/nls" : { availableLanguages : { "*" : "de" } } } )

// or
loader . config ( {
  paths : {
    vs : "..." ,
  } ,
  "vs/nls" : {
    availableLanguages : {
      "*" : "de" ,
    } ,
  } ,
} )

NPM 패키지

여전히 node_modules 에서 monaco-editor 파일을 가져 와서 원격로드를 사용하지 않고 코드에 묶으려면 번들링 도구를 사용해야합니다.

 import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// loaded monaco-editor from `node_modules`
loader . config ( { monaco } )

vite

vite 사용하는 경우이 작업을 수행해야합니다 (자세한 내용은 #1791 (댓글) 참조).

 import { loader } from "@guolao/vue-monaco-editor"

import * as monaco from "monaco-editor"
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"

self . MonacoEnvironment = {
  getWorker ( _ , label ) {
    if ( label === "json" ) {
      return new jsonWorker ( )
    }
    if ( label === "css" || label === "scss" || label === "less" ) {
      return new cssWorker ( )
    }
    if ( label === "html" || label === "handlebars" || label === "razor" ) {
      return new htmlWorker ( )
    }
    if ( label === "typescript" || label === "javascript" ) {
      return new tsWorker ( )
    }
    return new editorWorker ( )
  }
}

loader . config ( { monaco } )

롤업

Rollup 사용하는 경우 커뮤니티 제공 플러그인 롤업 플러그 인 모나코-편집기를 사용할 수 있습니다.

웹 팩

webpack 사용하는 경우 monaco-editor 공식적으로 Monaco-Editor-Webpack-Plugin이라는 webpack 플러그인을 제공하여 설치 및 사용할 수 있습니다.

영감

Monacovue는 다음 프로젝트의 영감 덕분에 가능합니다.

모나코 로더
모나코-반응

특허

MIT

확장하다

monaco vue

모나코-뷰

왜

설치

용법

소품 및 이벤트 및 슬롯

편집자

DIFF 편집기

후크

cdn

NPM 패키지

vite

롤업

웹 팩

영감

특허

gin vue admin

springboot vue 백신 예약 웹사이트 소스 코드

springboot vue 버스 경로 쿼리 시스템 소스 코드

vue 전자 상거래 블라인드 박스-h5 APP 블라인드 박스 쇼핑몰 | 같은 도시 블라인드 박스 데이트 수익 창출 thinkphp 커널 VUE 컴파일 가능

springboot vue 회계 장부 소스 코드

springboot vue 명승지 티켓 구매 시스템 소스 코드

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML 온라인 편집기

Asai 온라인 HTML 편집기

Google Dorks

shepherd

mongo express