vue monaco
v1.2.2
摩納哥編輯器是為代碼提供支持的代碼編輯器，現在可以作為VUE組件<MonacoEditor>可用。
npm install vue-monaco或者
yarn add vue-monaco使用摩納哥編輯 - 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加載摩納哥編輯器時，您需要更改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的快捷方式。theme ：設置options.theme的快捷方式。language ：設置options.language的快捷方式。amdRequire ：使用給定的AMD式要求功能加載摩納哥編輯器。diffEditor ： boolean表示這是一個差異，默認情況下false 。editorWillMountmonaco ： monaco module在安裝編輯器之前打電話。
editorDidMounteditor ： IStandaloneCodeEditor用於普通編輯器， IStandaloneDiffEditor的DIFF編輯器。安裝編輯器時調用。
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 ：返回編輯器實例。使用ref與MonacoEditor分組組件進行交互，以訪問方法： <MonacoEditor ref="editor" /> ，然後將this.$refs.editor.getEditor()可用。
使用diffEditor prop表明這是一個差異器，請使用original道具為原始編輯器設置內容，使用value prop來設置修改後的編輯器的內容。
< MonacoEditor
language="javascript"
: diffEditor = " true "
: value = " code "
: original = " originalCode "
/>在這種情況下，組件的getEditor()返回IStandaloneDiffEditor實例，而您可以使用getModifiedEditor()獲取修改的編輯器，該編輯器是IStandaloneCodeEditor實例。
git checkout -b my-new-featuregit commit -am 'Add some feature'git push origin my-new-featureVue-Monaco ©Egoist，根據MIT許可證發布。
由貢獻者的幫助（列表）的幫助者撰寫和維護。
網站·github @egoist·twitter @_egoistlily
