若依平台/vue2引入代码编辑器（monaco-editor）

需求背景：需要在线编辑javascript代码，方便维护，有些更新不需要再重新部署

一、安装依赖

"monaco-editor": "^0.30.1",

"monaco-editor-webpack-plugin": "^6.0.0",

二、 vue.config.js中添加如下配置

// editor配置

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

configureWebpack: {

        plugins: [

            // editor配置

            new MonacoWebpackPlugin({ languages: ['javascript', 'typescript', 'html', 'css', 'json'] })

        ],

    },

 

 三、为方便实用，将代码编辑器封装成组件Monacoeditor.vue

<template>
  <div
    ref="monaco-editor-btn"
    class="monaco-editor-btn"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
  name: "AcMonaco",
  props: {
    opts: {
      type: Object,
      default() {
        return {};
      },
    },
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      // 主要配置
      defaultOpts: {
        value: "", // 编辑器的值
        theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
        roundedSelection: true, // 右侧不显示编辑器预览框
        autoIndent: true, // 自动缩进
        automaticLayout: true, // 自动布局
        minimap: {
          // 关闭代码缩略图
          enabled: false, // 是否启用预览图
        },
      },
      // 编辑器对象
      monacoEditor: {},
    };
  },
  watch: {
    opts: {
      handler(newVal, oldVal) {
        this.monacoEditor.setValue(newVal.value);
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 初始化container的内容，销毁之前生成的编辑器
      this.$refs["monaco-editor-btn"].innerHTML = "";
      // 生成编辑器配置
      let editorOptions = Object.assign(this.defaultOpts, this.opts);
      // 生成编辑器对象
      this.monacoEditor = monaco.editor.create(
        this.$refs["monaco-editor-btn"],
        editorOptions
      );
      // 编辑器内容发生改变时触发
      this.monacoEditor.onDidChangeModelContent(() => {
        this.$emit("change", this.monacoEditor.getValue());
      });
    },
    // 供父组件调用手动获取值
    getVal() {
      return this.monacoEditor.getValue();
    },
  },
};
</script>
  
  

四、调用组件

 <div class="button-right-content">

          <Editor ref="monacoRef" :opts="opts" @change="changeValue"></Editor>

 </div>

import Editor from "./components/Monacoeditor.vue"; // 引入组件，并且注册组件

......

data(){

return{

  // 代码编辑器的配置项

    opts: {

        value: "",

        readOnly: false, // 是否只读

        language: "javascript", // 语言类型

        theme: "vs-dark", // 编辑器主题

      },

  }

}

components: { Editor},

//  初始化代码编辑器的内容

//  其中${name}是动态传过来的方法名称,all是传过来的所有参数，\n是用来换行

this.opts.value = `function ${name}(all){\n    let { _this } = all;\n}`;

// 获取代码编辑器的值

this.$refs["monacoRef"].getVal();

以下为官网示意图：