Cw-editor NPM | npm.io

CW Editor

preview

This is a wrapper for the Monaco Editor, which is a browser-based code editor. It is a component that can be used in any web application. It is based on the Monaco Editor. The Monaco Editor is the code editor that powers Visual Studio Code.

This was created to be used in courses delivered by CodeWorks, but can be used in any web application. It is a simple wrapper that allows you to easily add a code editor to your web application.

It even supports loading files directly from github, or any other URL that returns an array of files in the following format.

[
  {
    "name": "filename.ext",
    "content": "file content"
  }
]

You can customize the editor by passing in options to the <Editor /> component.

Installation

npm install cw-editor

Usage

<script setup>
import { Editor } from 'cw-editor'

</script>

<template>
  <Editor src="" />
</template>

Props

Name	Type	Default	Description
src	String	""	The URL to load the files from
files	Array	[]	An array of files to load into the editor
projectName	String	"localstorage-key"	saves and loads from localstorage
defaultFiles	Array	'readme.md'	Files to show in the file explorer
hiddenFiles	Array	[]	Files to hide from the file explorer
sizes	Array	10, 70, 30	The sizes of the file explorer, editor, and output window