WC-Monaco-Editor

A Vanilla Web Component to embed a Monaco code editor into a web page

---

Installation

npm i @vanillawc/wc-monaco-editor

This will create the wc-monaco-editor folder in node_modules.

---

Usage

<wc-monaco-editor language="markdown"></wc-monaco-editor>

Attributes

• id - the editor id (default editor)
• src - load an external source file
• language - set the source language
• style - CSS styling (default height:100%;width:100%;)

Note: The ID attribute is required if there are multiple editors

Properties

• value - get/set the editor's contents

Load Javascript from an external source

<wc-monaco-editor language="javascript" src="./assets/sample.js"></wc-monaco-editor>

Demo: WC-Monaco-Editor - Demo

Demos

The demo can also be run locally with

npm run start