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
