60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div :id="name"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import loader from '@monaco-editor/loader';
|
||
|
|
|
||
|
|
let monacoResultInst = null;
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "monacoEditor",
|
||
|
|
props: {
|
||
|
|
name: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
language: {
|
||
|
|
type: String,
|
||
|
|
default: 'text',
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
readonly: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
loader.init().then((monaco) => {
|
||
|
|
monacoResultInst = monaco;
|
||
|
|
|
||
|
|
monaco.editor.create(document.querySelector(`#${this.name}`), {
|
||
|
|
value: '',
|
||
|
|
language: this.language,
|
||
|
|
readOnly: this.readonly,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value: {
|
||
|
|
// the callback will be called immediately after the start of the observation
|
||
|
|
immediate: true,
|
||
|
|
deep: true,
|
||
|
|
async handler(value, oldValue) {
|
||
|
|
while (!monacoResultInst) {
|
||
|
|
await new Promise(r => setTimeout(r, 10));
|
||
|
|
}
|
||
|
|
|
||
|
|
monacoResultInst.editor.getModels()[0].setValue(value.toString());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|