vue monaco
v1.2.2
Monaco Editor - это редактор кода, который поддерживает код, теперь он доступен в качестве компонента Vue <MonacoEditor> благодаря этому проекту.
npm install vue-monacoИли
yarn add vue-monacoИспользуйте Monaco-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 > При загрузке Monaco-Editor из 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 Editor.Называется, когда редактор монтируется.
changeЗначение редактора обновляется.
value : значение нового редактора.event : event от onDidChangeModelContent . Вы можете послушать события редактора напрямую, как это:
< 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, чтобы указать, что это Diffeditor, используйте original опору, чтобы установить контент для исходного редактора, используйте Prop value , чтобы установить контент для модифицированного редактора.
< 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-feature VUE-MONACO © EGOIST, выпущенный по лицензии MIT.
Автор и поддерживается Эгоистом с помощью участников (список).
Веб -сайт · github @egoist · Twitter @_egoistlily
