vue monaco
v1.2.2
Monaco Editorは、Power vs CodeをPowersed Code Editorであり、このプロジェクトのおかげで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 > 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の2番目の議論。value ： options.valueを設定するショートカット。theme ： options.themeを設定するショートカット。Theme。language ： options.languageを設定するショートカット。amdRequire ：与えられたAMDスタイルの必要性機能を使用して、モナコ編集者をロードします。diffEditor ： boolean 、これがdiffeditorであり、デフォルトでfalseことを示しています。editorWillMountmonaco ： monaco module編集者を取り付ける前に呼び出されます。
editorDidMounteditor ：通常の編集者のためのIStandaloneCodeEditor 、 IStandaloneDiffEditor DIFF EDITOR。エディターがマウントされたときに呼び出されます。
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 this.$refs.editor.getEditor()使用してMonacoEditorコンポーネントと対話してメソッド<MonacoEditor ref="editor" />アクセスします。
diffEditor Propを使用して、これがdiffeditorであることを示し、 originalプロップを使用して元のエディターのコンテンツを設定し、 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-featureVue-Monaco ©Egoist、MITライセンスの下でリリース。
貢献者の助けを借りてエゴイストによって執筆および維持されています（リスト）。
ウェブサイト・github @egoist・twitter @_egoistlily
