# 燕子web代码编辑器

>这是基于微软的monaco和vue封装的一个代码编辑器，浏览器可运行。主要功能有:html、javascript、css代码编辑，高亮显示，语法错误提示等，可以帮您很快的拥有一个web的代码编辑器

![yanzi-monaco-editor](https://code.xzlovecyy.com/files/image/yanzi-monaco-editor.png)

使用方法


### 使用方法

下载

```yaml
npm i yanzi-monaco-editor

npm install --save monaco-editor-webpack-plugin@3.0.1

npm install --save copy-webpack-plugin@4.0.1
```


配置
vue.config.js
```js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack:{
    plugins: [
      new MonacoWebpackPlugin(),
      new CopyWebpackPlugin([
        {
          from: 'node_modules/yanzi-monaco-editor/lib/editor.worker.js',
          to: 'static/js/editor.worker.js',
          toType: 'file'
        },
        {
          from: 'node_modules/yanzi-monaco-editor/lib/html.worker.js',
          to: 'static/js/html.worker.js',
          toType: 'file'
        },
        {
          from: 'node_modules/yanzi-monaco-editor/lib/css.worker.js',
          to: 'static/js/css.worker.js',
          toType: 'file'
        },
        {
          from: 'node_modules/yanzi-monaco-editor/lib/ts.worker.js',
          to: 'static/js/ts.worker.js',
          toType: 'file'
        },
        {
          from: 'node_modules/yanzi-monaco-editor/lib/json.worker.js',
          to: 'static/js/json.worker.js',
          toType: 'file'
        },
        {
          context: 'node_modules/yanzi-monaco-editor/lib/',
          from: '*.umd.min.*.js',
          to: 'static/js/',
          toType: 'dir'
        },

        {
          context: 'node_modules/yanzi-monaco-editor/lib/static/',
          from: 'fonts',
          to: 'static/js/fonts',
          toType: 'dir'
        }
      ])
    ]
  }
}

```


```html
<template>
  <div id="app">
      
    <!-- 使用示例 -->
    <yanziMonacoEditor></yanziMonacoEditor>
      
  </div>
</template>

<script>
import 'yanzi-monaco-editor/lib/yanziMonacoEditor.css' // 引入基本样式
import yanziMonacoEditor from "yanzi-monaco-editor";// 引入核心文件

export default {
  name: "App",
  components: {
    yanziMonacoEditor //注册组件
  }
};
</script>
```





具体使用

```html
<yanziMonacoEditor ref="editor" :settings="settings"></yanziMonacoEditor>
```





### 属性

| 属性名称    | 说明                                                         | 类型    | 必填  | 默认值                       |
| ----------- | ------------------------------------------------------------ | ------- | ----- | ---------------------------- |
| settings      | 配置                                             | Object  | false | - |




### 配置列表

| 配置名称 | 说明             | 类型   | 必填  |
| -------- | ---------------- | ------ | ----- |
| theme   | 编辑器主题           | String | false |
| className    | 自定义类名         | String | false |
| style      | 样式，包括 width 、 height             | Object | false |



### 方法
|方法名|说明|参数|
|-|-|-|
|getValue|获取编辑器最新内容|-|
|run|执行编辑器内的代码（仅html和js可运行）|-|

### 完整使用示例
```html
<template>
  <div id="app">
    <yanziMonacoEditor ref="editor" :settings="settings"></yanziMonacoEditor>
  </div>
</template>

<script>
import 'yanzi-monaco-editor/lib/yanziMonacoEditor.css'
import yanziMonacoEditor from 'yanzi-monaco-editor'
export default {
  name: 'App',
  components: { yanziMonacoEditor },
  data() {
    return {
      settings: {
        theme: 'vs-dark', // vs | vs-dark | hc-black
        className: '', // 自定义类名
        style: {
          width: '100%',
          height: '100%',
        },
      },
    }
  },
  methods: {
    getValue() {
      // 获取编辑器最新内容
      let value = this.$refs.editor.getValue()
      console.log(value)
    },
    run() {
      // 运行编辑器中的代码，仅html 、javascript 可运行
      this.$refs.editor.showView()
    },
    save() {
      // 可自定义的保存操作
      let value = this.$refs.editor.getValue()
      console.log(value)
    },
    keydown() {
      // 可绑定键盘事件
      let that = this
      document.onkeydown = function (e) {
        var keyCode = e.keyCode || e.which || e.charCode
        var ctrlKey = e.ctrlKey || e.metaKey
        if (ctrlKey) {
          switch (keyCode) {
            case 82: // -- ctrl + R  运行
              that.run()
              e.preventDefault()
              return false
            case 83: // -- ctrl + S 保存
              that.save()
              e.preventDefault()
              return false
          }
        }
      }
    },
  },
  mounted() {
    this.keydown()
  },
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#app {
  width: 100%;
  height: 100%;
}
#monaco {
  height: 100%;
}
</style>

```