64 lines
1.2 KiB
Vue
64 lines
1.2 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: this.value,
|
|
language: this.language,
|
|
readOnly: this.readonly,
|
|
});
|
|
});
|
|
},
|
|
unmounted() {
|
|
if (monacoResultInst) {
|
|
monacoResultInst.editor.getModels().forEach((model) => model.dispose());
|
|
}
|
|
},
|
|
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>
|