README
s-monaco-editor
An easy-to-use web component of Monaco Editor for any framework (Angular, React, Vue, etc.) or vanilla JS.
How to install
Use NPM
npm i @seanwong24/s-monaco-editor
Use CDN
<script type="module" src="https://unpkg.com/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.esm.js"></script>
<script nomodule src="https://unpkg.com/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.js"></script>
How to use
First you need to import the component to your project, then the easiest way to use the component is to put s-monaco-editor
tag inside any element that you want to attach in html.
<s-monaco-editor
style="width: 600px; height: 500px;"
monaco-vs-path="./build/monaco-editor/vs"
value="console.log('Hello Wrold!')"
language="javascript"
></s-monaco-editor>
Leave monaco-vs-path
unset to use monaco from the CDN. To use your own version of Monaco Editor, just provide the vs
path of your Monaco Editor.
Get monaco and editor instance
You can add a listener of 'componentLoad
event to obtain the Monaco and current editor instance like the below example:
document.querySelector('s-monaco-editor').addEventListener('componentLoad', (event) => {
const {monaco, editor} = event.detail;
});
Properties & attributes
To see the list of available properties and attributes, check here.
How to import
Basically, you want to call defineCustomElements()
from the loader. If you want, you can optionally call applyPolyfills()
first as well. For different project types, please check below sections for more details.
Vanilla JS
Script tag
First, install using NPM.
Then in the html
<!-- for ES6 -->
<script type="module" src="node_modules/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.esm.js"></script>
<!-- for ES5 -->
<script nomodule src="node_modules/@seanwong24/s-monaco-editor/dist/s-monaco-editor/s-monaco-editor.js"></script>
Import statement
First, install using NPM.
Then in JS file
import { applyPolyfills, defineCustomElements } from "node_modules/@seanwong24/s-monaco-editor/loader/index.js";
applyPolyfills().then(() => {
defineCustomElements();
});
And in html
<script type="module" src="path/to/the/js/file"></script>
Note that type="module"
only works in modern browsers.
Angular
Use loader
First install using NPM.
Then include CUSTOM_ELEMENTS_SCHEMA
in any module that uses s-monaco-editor
. For example, in AppModule
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent],
// add this
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
After that, in main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
// add this
import { applyPolyfills, defineCustomElements } from '@seanwong24/s-monaco-editor/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
// and add this
applyPolyfills().then(() => {
defineCustomElements()
});
React
Use loader
First install using NPM.
Then in index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// add this
import { applyPolyfills, defineCustomElements } from "@seanwong24/s-monaco-editor/loader";
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
// and add this
applyPolyfills().then(() => {
defineCustomElements();
});
Vue
Use loader
First install using NPM.
Then in main.js
import Vue from 'vue';
import App from './App.vue';
import { applyPolyfills, defineCustomElements } from '@seanwong24/s-monaco-editor/loader';
Vue.config.productionTip = false;
// add this
Vue.config.ignoredElements = ['s-monaco-editor'];
// and add this
applyPolyfills().then(() => {
defineCustomElements();
});
new Vue({
render: h => h(App)
}).$mount('#app');