imguolao
commented
7 months ago Try the following code ( copy to the local html file and open in your broswer ):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMD Example</title>
<script src="https://unpkg.com/vue@3.3.7/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-demi@0.14.6/lib/index.iife.js"></script>
<script src="https://unpkg.com/@monaco-editor/loader@1.4.0/lib/umd/monaco-loader.js"></script>
<script src="https://unpkg.com/@guolao/vue-monaco-editor@1.4.0/lib/umd/monaco-vue.js"></script>
<style>
html,
body,
#app {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<!-- Will render here -->
</div>
</body>
<script>
const { createApp, ref, defineComponent, onBeforeMount } = Vue
const { VueMonacoEditor, install, loader } = monaco_vue
const Editor = defineComponent({
components: {
VueMonacoEditor,
},
template: `
<vue-monaco-editor
v-model:value="code"
:options="MONACO_EDITOR_OPTIONS"
/>
`,
setup() {
const MONACO_EDITOR_OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
}
const code = ref('// some code...')
return {
MONACO_EDITOR_OPTIONS,
code,
}
}
})
const FallBackEditor = defineComponent({
components: {
Editor,
},
template: `
<editor v-if="show"/>
<div v-else>fallback</div>
`,
setup() {
const show = ref(true)
onBeforeMount(() => {
// --- delete ---
loader.config({
paths: {
// mock offline, net::ERR_CONNECTION_CLOSED
vs: 'https://cdn.jsdelivr-404-mock.net/npm/monaco-editor@0.43.0/min/vs'
},
})
// --- delete ---
loader
.init()
.catch(() => show.value = false)
})
return {
show,
}
}
})
const app = createApp({
components: {
FallBackEditor,
},
template: `<fall-back-editor />`,
})
app.mount('#app')
</script>
</html>
naltatis
I'm planning to use the editor in an environment where the web app comes from a local network and the internet is not always reliable or available. I need a way to react to failed initialization (CDN loading) of the editor. Are there any hooks or mechanisms I can use to implement this right now? Currently I only get a logged error https://github.com/imguolao/monaco-vue/blob/37aca64a5cce3480960cfd0b8b7fe75e03c9f47a/packages/editor/src/hooks/useMonaco.ts#L10-L22 but haven't found a way to react to it properly.
I'm planning to fall back to a simple textarea. Maybe this fallback mode could also be a built-in feature of this plugin?