Vue2 + Monaco-Editor（VScode 编辑器） 在项目当中使用

1、环境

1、Node:

node: v12.22.12
npm: 6.14.16

2、浏览器环境

Google Chrome : version : 89

3、Vue

Vue: ^2.6.14

2、Monaco-editor

1、地址

官网地址：https://microsoft.github.io/monaco-editor/

2、版本

"monaco-editor": "^0.23.0",
"monaco-editor-webpack-plugin": "^3.1.0",

说明 ： 因为业务需求必须兼容 Google Chrome 最低 76 版本，所以才安装的上面的版本，大家可以根据自己的业务需求安装不同的版本 当然功能上也会稍有不同 （ 安装版本大家可以问下 AI )

3、安装

npm install monaco-editor@0.23.0 monaco-editor-webpack-plugin@3.1.0

vue.config.js 也需要配置

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

module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        // 要包含的语言，可按需添加
        languages: ['javascript', 'html', 'css', 'json'],
        // 要包含的特性
        features: ['coreCommands', 'find', 'suggest', 'hover']
      })
    ]
  }
};

3、代码

1、结构

2、App.vue

<template>
  <div>
    <div style="height: 300px">
      <MonacoEditor
        :language="'json'"
        :codes="htmlCodesComputed"
      ></MonacoEditor>
    </div>
  </div>
</template>
 
<script>
import MonacoEditor from "./components/monacoEditor.vue";
export default {
  components: {
    MonacoEditor,
  },
  data() {
    return {
      htmlCodes: {
        a: "1",
        b: {
          b1: [1, "2"],
          b2: {
            b21: "ss",
          },
          b3: false,
          b4: false,
          b5: false,
          b6: false,
          b7: false,
          b9: false,
          b31: false,
          b32: false,
        },
      },
    };
  },
  computed: {
    htmlCodesComputed() {
      return JSON.stringify(this.htmlCodes, null, 4);
    },
  },
  methods: {
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

3、monacoEditor.vue

<template>
  <div class="monacoEditor">
    <div><button @click="selectTextFn">设置选中</button></div>
    <div
      class="monacoEditor-container"
      ref="monacoEditorContainer"
      :style="{ height: `${monacoEditorContainerHeight}px` }"
    ></div>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
export default {
  props: {
    // 编辑器的主题颜色
    themeValue: {
      type: String,
      default: "vs", // vs 默认 ， hc-black 高亮 ， vs-dark 深色
    },
    // 编辑器内容
    codes: {
      type: String,
      default: "",
    },
    // 编辑器内容展示方式
    language: {
      type: String,
      default: "plaintext", // 默认 文本 方式 ，常用的话 是 json 格式 ，格式配置参照官网
    },
    editorOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      monacoEditor: null,

      monacoEditorContainerHeight: 0, // 高度不能通过样式 100% 来设置

      editorOptionsSelves: {
        lineNumbersMinchars: 0, //左侧序号的宽度 如果是默认就渲染 宽度是自己的计算的 但是 要启用编辑 readOnly: false ，这个时候这个值就得根据情况来设置，不然序号显示有问题
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: true, // 只读
        cursorStyle: "line", //光标样式
        automaticLayout: true, //自动布局
        glyphMargin: true, //字形边缘
        useTabStops: false,
        autoIndent: true, //自动布局
        fontSize: 14, //字体的大小
        scrollbar: {
          verticalScrollbarSize: 3, // 垂直滚动条宽度
          horizontalScrollbarSize: 3, //水平滚动条高度
        },
        minimap: {
          enabled: false, // 默认不显示右侧小地图
        },
        scrollBeyondLastLine: false, //取消底部默认滚动高度
      },
    };
  },

  mounted() {
    this.initEditorFn();
  },

  watch: {
    codes: {
      handler(newV) {
        if (this.monacoEditor) {
          this.monacoEditor.setValue(newV);
        }
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    initEditorFn() {
      this.$nextTick(() => {
        let _this = this;

        // 设置编辑器高度
        let height = this.$refs.monacoEditorContainer.offsetHeight;
        _this.monacoEditorContainerHeight = height || 200;

        _this.$refs.monacoEditorContainer.innerHTML = "";
        _this.monacoEditor = monaco.editor.create(
          _this.$refs.monacoEditorContainer,
          {
            value: _this.codes,
            language: _this.language,
            theme: _this.themeValue,
            ..._this.editorOptionsSelves,
            ..._this.editorOptions,
          }
        );
        _this.$emit("onMounted", _this.monacoEditor); //编辑器创建完成回调
        _this.monacoEditor.onDidChangeModelContent(function (event) {
          //编辑器内容changge事件
          _this.$emit("onCodeChange", _this.monacoEditor.getValue(), event);
        });
      });
    },

    selectTextFn() {
      // 获取编辑器实例
      const editor = this.monacoEditor;

      // 设置选中范围
      editor.setSelection({
        startLineNumber: 17,
        startColumn: 4,
        endLineNumber: 18,
        endColumn: 10,
      });

      // 滚动到选中位置，确保可见
      editor.revealRangeInCenter(editor.getSelection());
    },

    getEditorCodesFn() {
      if (!this.monacoEditor) {
        return;
      }

      // 获取编辑器实例
      const editor = this.monacoEditor;
      const model = editor.getModel();
      const markers = monaco.editor.getModelMarkers({ resource: model.uri });

      // 错误和警告
      const errors = markers.filter((item) =>
        [monaco.MarkerSeverity.Error, monaco.MarkerSeverity.Warning].includes(
          item.severity
        )
      );

      if (errors.length > 0) {
        this.$message.warning("内容格式不正确！");
        return null;
      }

      const codes = editor.getValue();
      return codes;
    },
  },
};
</script>
<style scoped >
.monacoEditor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.monacoEditor-container {
  flex: 1;
}
</style>

4、效果

总结 ： 以上内容有什么需要修改，还望广大网友多多纠正 ，谢谢啦