# vue-monaco-webpack

> vue版的monaco编辑器，可以利用jsonSchema进行校验

Latest version **1.0.1** (published 2018-05-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-monaco-webpack
pnpm add vue-monaco-webpack
yarn add vue-monaco-webpack
bun add vue-monaco-webpack
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-05-22 |
| First published | 2018-05-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 7.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | sunbaixin |
| Maintainers | jerry-sun |
| Keywords | monaco, vue-monaco, vue-monaco-editor, vue-monaco-webpack, monaco-editor, vue-editor |

## Links

- npm: https://www.npmjs.com/package/vue-monaco-webpack
- Repository: https://github.com/hello-sunbaixin/vue-monaco-webpack
- Homepage: https://github.com/hello-sunbaixin/vue-monaco-webpack#readme
- Issues: https://github.com/hello-sunbaixin/vue-monaco-webpack/issues
- npm.io page: https://npm.io/package/vue-monaco-webpack

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.1.0
- [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.12.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^4.5.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-05-22
- 1.0.0 — 2018-05-22

## README

# vue-monaco-webpack

> Based of [vue-monaco-editor](https://github.com/matt-oconnell/vue-monaco-editor)

## 简介
基于monaco-editor改造成支持vue版本，并且使用webpack通用打包工具，最重要是如果编辑的是json，
支持json-schema的校验。
## 安装

``` bash
npm install vue-monaco-webpack --save
```

## 基础用法

```js
import MonacoEditor from 'vue-monaco-webpack'

// use in component
export default {
  components: {
    MonacoEditor
  }
}
```

## 组件支持传递的属性

| Option        | Type          | Default | Description
|:-------------|:-------------|:-------|:-------|
| language      | String        | `javascript` | |
| height        | Number/String | `100%` ||
| width | Number/String | `100%` ||
| code | String | `// code \n` | Initial code to show |
| theme | String | `vs-dark` | vs, hc-black, or vs-dark |
| jsonSchemas | Array[Object] | schema的格式见代码实例 | json-schemas|
|srcPath|String|/dist|monoca-editor最终被打包到的文件夹
| changeThrottle | Number(ms) | `0` |  throttle `codeChange` emit |
| editorOptions | Object | Merged with defaults below | See [Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) |

### 编辑器默认选项
```js
defaults: {
  selectOnLineNumbers: true,
  roundedSelection: false,
  readOnly: false,
  cursorStyle: 'line',
  automaticLayout: false,
  glyphMargin: true
}
```

## 组件支持的事件


| Event        | Returns          | Description
|:-------------|:-------------|:-------|
|mounted|`editor`[editor instance]|Emitted when editor has mounted|
|codeChange|`editor`[editor instance]|Emitted when code has changed|

## 使用实例

*Component Implementation*
```vue
<MonacoEditor
    height="600"
    language="typescript"
    :code="code"
    :editorOptions="options"
    :jsonSchemas="jsonSchemas"
    @mounted="onMounted"
    @codeChange="onCodeChange"
    >
</MonacoEditor>
```

*Parent*
```js
//如果需要json-schemas来校验，需要引入json-schema,json-schema中必须有$id属性
const jsonSchemas=[require('test1.json'),require('test2.json')]
module.exports = {
  components: {
    Monaco
  },
  data() {
    return {
      code: '// Type away! \n',
      options: {
      },
      jsonSchemas//不是必传，用于json校验
    };
  },
  methods: {
    onMounted(editor) {
      this.editor = editor;
    },
    onCodeChange(editor) {
      console.log(editor.getValue());
    }
  }
};
```


## Webpack使用

默认情况下，monaco-editor通过cdn的方式require，如果使用webpack的话，我们需要把依赖的monaco-editor拷贝到最终打包的目录，保证能正确引用到。

`npm install copy-webpack-plugin --save-dev`

Add this to your webpack.config.js:

```js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs',
      }
    ])
  ]
};
```

`srcPath` 注意填上最终打包后的文件夹名称

## 开发方式

```
git clone [this repo] .
npm install
npm run dev
```

Edit `src/App.vue`


## 说明
使用方法，可参见src／Monaco.vue 中使用方式

## 特色
支持可通过配置jsonSchemas，对编辑的json进行校验

---
_Source: https://npm.io/package/vue-monaco-webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._