The library provides a straightforward and effortless method for initializing and utilizing the Monaco library in Svelte.js. It enables loading the Monaco library from a Content Delivery Network (CDN) for convenience.
npm install @cloudparker/easy-monaco-editor-svelte --save-dev
<script lang="ts">
import EasyMonacoEditor from '$lib';
import { onMount } from 'svelte';
let editorRef: HTMLDivElement;
let editor: any;
let code = `function x() {
console.log("Hello, world!");
}`;
const handleMonaco = (ev: CustomEvent) => {
let monaco: any = ev.detail;
if (monaco && editorRef) {
editor = monaco.editor.create(editorRef, {
value: code,
language: 'javascript',
});
}
};
onMount(() => {
return () => {
editor && editor.dispose();
};
});
</script>
<h1>Javascript Editor</h1>
<div class="js-editor-container">
<EasyMonacoEditor on:monaco={handleMonaco}>
<div bind:this={editorRef} style="min-height:340px;width:100%" />
</EasyMonacoEditor>
</div>
<style>
.js-editor-container {
padding: 16px;
}
</style>
default: https://cdn.jsdelivr.net/npm/monaco-editor@0.36.1/min/vs/loader.js
Monaco loader package URL, change if needed.
default:
{
paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.36.1/min/vs' }
}
Change the required config if needed.
default: https://cdn.jsdelivr.net/npm/monaco-editor@0.36.1/min/vs/worker.js
Change if required.
default:
{
getWorkerUrl: (workerId: string, label: string) => {
return monacoWorkerUrl;
}
}
Change if required.
default: ['vs/editor/editor.main']
Change if required.
Default: true
Determine whether to load RequireJS or not. The library is needed for the current version of Monaco.
default: https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js
Require.js URL, change if needed.
on:monaco
Triggers after Monaco initialization is completed. It also returns the Monaco instance. This instance can be used later to create an editor.
<div class="js-editor-container">
<EasyMonacoEditor on:monaco={handleMonaco}>
<div bind:this={editorRef} style="min-height:340px;width:100%" />
</EasyMonacoEditor>
</div>
const handleMonaco = (ev: CustomEvent) => {
let monaco: any = ev.detail;
if (monaco && editorRef) {
editor = monaco.editor.create(editorRef, {
value: code,
language: 'javascript',
});
}
};
onMount(() => {
return () => {
editor && editor.dispose();
};
});