代码编辑器

<template>
  <ace
    ref="editor"
    v-model="value"
    :lang="lang"
    :width="width === 0 ? '100%' : width"
    :height="height === 0 ? '100%' : height"
    :theme="theme"
    :options="options"
    @init="initEditor"
    v-bind="config"
  >
  </ace>
</template>

<script>
import ace from "vue2-ace-editor";

export default {
  name: "Editor",
  components: {
    ace,
  },
  props: {
    width: {
      type: Number,
      default: 0,
    },
    height: {
      type: Number,
      default: 500,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    theme: {
      type: String,
      default: "dracula",
    },
    lang: {
      type: String,
      default: "json",
    },
    config: {
      type: Object,
      default: () => {
        return {
          enableLiveAutocompletion: true,
          fontSize: 20,
        };
      },
    },
  },
  data() {
    return {
      value: "",
    };
  },
  computed: {
    options() {
      return {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        showPrintMargin: false, //去除编辑器里的竖线
        fontSize: this.config.fontSize,
        enableLiveAutocompletion: this.config.enableLiveAutocompletion,
        readOnly: this.readOnly,
      };
    },
  },
  methods: {
    initEditor(editor) {
      require("brace/ext/language_tools");
      // 设置语言
      require("brace/mode/sh");
      require("brace/mode/json");
      require("brace/mode/xml");
      require("brace/mode/yaml");
      require("brace/mode/properties");
      require("brace/snippets/sh");
      require("brace/snippets/json");
      require("brace/snippets/xml");
      require("brace/snippets/yaml");
      require("brace/snippets/properties");
      // 设置主题
      // 浅色 iplastic sqlserver tomorrow xcode
      // 深色 dracula gruvbox idle_fingers merbivore terminal tomorrow_night_bright
      require("brace/theme/dracula");
      // 监听值的变化
      editor.getSession().on("change", () => {
        this.$emit("change", this.value);
      });
    },
  },
};
</script>

<style scoped></style>