vue monaco
v1.2.2
Monaco Editor는 Code와 Code에 전원을 공급하는 코드 편집기입니다. 이제이 프로젝트 덕분에 VUE 구성 요소 <MonacoEditor> 로 제공됩니다.
npm install vue-monaco또는
yarn add vue-monacomonaco-editor-webpack-plugin을 사용하십시오 :
// webpack.config.js
const MonacoEditorPlugin = require ( 'monaco-editor-webpack-plugin' )
module . exports = {
plugins : [
new MonacoEditorPlugin ( {
// https://github.com/Microsoft/monaco-editor-webpack-plugin#options
// Include a subset of languages support
// Some language extensions like typescript are so huge that may impact build performance
// e.g. Build full languages support with webpack 4.0 takes over 80 seconds
// Languages are loaded on demand at runtime
languages : [ 'javascript' , 'css' , 'html' , 'typescript' ]
} )
]
}그런 다음 구성 요소를 사용하십시오.
< template >
< MonacoEditor class = " editor " v-model = " code " language = " javascript " />
</ template >
< script >
import MonacoEditor from ' vue-monaco '
export default {
components : {
MonacoEditor
},
data () {
return {
code : ' const noop = () => {} '
}
}
}
</ script >
< style >
.editor {
width : 600 px ;
height : 800 px ;
}
</ style > <!DOCTYPE html >
< html >
< head >
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
< meta http-equiv =" Content-Type " content =" text/html;charset=utf-8 " />
</ head >
< body >
< div id =" app " > </ div >
< script src =" https://unpkg.com/vue " > </ script >
< script src =" https://unpkg.com/vue-monaco " > </ script >
< script src =" monaco-editor/min/vs/loader.js " > </ script >
< script >
require . config ( { paths : { vs : 'monaco-editor/min/vs' } } )
new Vue ( {
el : '#app' ,
template : `
<monaco-editor
style="width:800px;height:600px;border:1px solid grey"
v-model="code"
language="javascript"
:amdRequire="amdRequire"
/>` ,
data : {
code : 'const noop = () => {}'
} ,
methods : {
amdRequire : require
}
} )
</ script >
</ body >
</ html > CDN에서 monaco-editor를로드 할 때는 다음과 같이 보이도록 require.config 변경해야합니다.
require . config ( { paths : { vs : 'http://www.mycdn.com/monaco-editor/min/vs' } } )
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script
window . MonacoEnvironment = {
getWorkerUrl : function ( workerId , label ) {
return `data:text/javascript;charset=utf-8, ${ encodeURIComponent ( `
self.MonacoEnvironment = {
baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
};
importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');` ) } `
}
}options : monaco.editor.create 의 두 번째 논쟁.value : options.value 설정하는 바로 가기. value.theme : options.theme 설정하는 바로 가기.language : options.language 설정하는 바로 가기.amdRequire : 주어진 AMD 스타일을 사용하여 monaco-editor를로드합니다.diffEditor : boolean 이것이 기본적으로 false DIFFEDITOR임을 나타냅니다.editorWillMountmonaco : monaco module편집자를 장착하기 전에 호출되었습니다.
editorDidMounteditor : Diff 편집기를위한 IStandaloneCodeEditor 편집기, IStandaloneDiffEditor 를위한 ISTANDALONECODEEDITOR.편집기가 장착 될 때 호출됩니다.
change편집기 값이 업데이트됩니다.
value : 새로운 편집기 값.event : onDidChangeModelContent 의 event . 편집자 이벤트를 다음과 같이 직접들을 수 있습니다.
< template >
< MonacoEditor v-model = " code " @editorDidMount = " editorDidMount " />
</ template >
< script >
export default {
methods : {
editorDidMount ( editor ) {
// Listen to `scroll` event
editor . onDidScrollChange ( e => {
console . log (e)
})
}
},
data () {
return {
code : ' ... '
}
}
}
</ script >모든 편집기 이벤트는이 페이지를 참조하십시오.
getEditor(): IStandaloneCodeEditor : 편집기 인스턴스를 반환합니다. 메소드에 this.$refs.editor.getEditor() 하려면 ref <MonacoEditor ref="editor" /> 하여 MonacoEditor 구성 요소와 상호 작용하십시오.
diffEditor Prop을 사용하여 Diffeditor임을 나타내고 original 소품을 사용하여 원래 편집기의 컨텐츠를 설정하고 value 소품을 사용하여 수정 된 편집기의 컨텐츠를 설정하십시오.
< MonacoEditor
language="javascript"
: diffEditor = " true "
: value = " code "
: original = " originalCode "
/> 이 경우 구성 요소의 getEditor() 는 IStandaloneDiffEditor 인스턴스를 반환하고 getModifiedEditor() 사용하여 IStandaloneCodeEditor 인스턴스 인 수정 된 편집기를 가져올 수 있습니다.
git checkout -b my-new-feature 만듭니다git commit -am 'Add some feature'git push origin my-new-feature Vue-Monaco © Egoist, MIT 라이센스에 따라 출시되었습니다.
기고자의 도움으로 자아가 저술 및 유지 관리합니다 (목록).
웹 사이트 · github @egoist · twitter @_egoistlily
