yanzi-monaco-editorbb

燕子web代码编辑器

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

使用方法

使用方法

下载

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

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'
        }
      ])
    ]
  }
}

<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>

具体使用

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

属性

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

配置列表

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

方法

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

完整使用示例

<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)
    },
    // 向编辑器添加一个 tab 
    setModel(){
        let model = {
            mode:"html"
        }
        this.$refs.editor.setModel(model);
    },
    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>