基于vue2-ace-editor的代码编辑器

基于vue2-ace-editor的代码编辑器

一、AceEditor组件

1.组件定义

<template>
  <editor ref="codeEditor" v-model="currentContent" @init="editorInit" :options="options" :lang="lang" :theme="codeStyle" :width="width" :height="height"/>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AceEditor',
  components: {
    editor: require('vue2-ace-editor')
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    content: {
      type: String,
      required: true,
      default: () => null
    },
    lang: {
      type: String,
      default: 'java'
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: {
        autoScrollEditorIntoView: true,
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: false,
        // 只读
        readOnly: this.readOnly,
        // 显示打印边距线
        showPrintMargin: false,
        // 字体大小
        fontSize: this.$store.state.settings.codeSize
      }
    }
  },
  computed: {
    ...mapState({
      codeStyle: state => state.settings.codeStyle,
      codeSize: state => state.settings.codeSize
    }),
    currentContent: {
      get() {
        return this.content
      },
      set(val) {
        this.$emit('update:content', val)
      }
    }
  },
  watch: {
    codeSize: {
      handler: function(value) {
        this.$refs.codeEditor.editor.setOptions({
          fontSize: value
        })
      },
      deep: true
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    editorInit(editor) {
      require('brace/ext/language_tools')
      require('brace/mode/java')
      require('brace/mode/mysql')
      require('brace/mode/json')
      require('brace/mode/xml')
      require('brace/theme/chrome')
      require('brace/theme/github')
      require('brace/theme/eclipse')
      require('brace/theme/dracula')
      require('brace/snippets/java')
      require('brace/snippets/mysql')
      require('brace/ext/beautify')
    },
    format() {
      const ace = require('brace')
      const editor = this.$refs.codeEditor.editor
      const beautify = ace.acequire('ace/ext/beautify')
      beautify.beautify(editor.session)
    }
  }
}
</script>

<style scoped>

</style>

2.组件引用

<AceEditor ref="codeEditor" :content.sync="sqlText" lang="mysql" :read-only="false" width="100%" height="600px"></AceEditor>

ace-editor beautify扩展格式化效果极差，建议结合vkbeautify第三方js插件使用。

二、vkbeautify格式化插件

vkBeautify：javascript plugin to pretty-print or minify
text in XML, JSON, CSS and SQL formats.

1.package.json

"dependencies": {
    "vkbeautify": "^0.99.3",
}

2.使用说明

Pretty print

    vkbeautify.xml(text [,indent_pattern]);
    vkbeautify.json(text [,indent_pattern]);
    vkbeautify.css(text [,indent_pattern]);
    vkbeautify.sql(text [,indent_pattern]);

    @text - String; text to beatufy;
    @indent_pattern - Integer | String;
            Integer:  number of white spaces;
            String:   character string to visualize indentation ( can also be a set of white spaces )

Minify

    vkbeautify.xmlmin(text [,preserve_comments]);
    vkbeautify.jsonmin(text);
    vkbeautify.cssmin(text [,preserve_comments]);
    vkbeautify.sqlmin(text);

    @text - String; text to minify;
    @preserve_comments - Bool; [optional];
            Set this flag to true to prevent removing comments from @text ( minxml and mincss functions only. )

Examples

    vkbeautify.xml(text); // pretty print XML
    vkbeautify.json(text, 4 ); // pretty print JSON
    vkbeautify.css(text, '. . . .'); // pretty print CSS
    vkbeautify.sql(text, '----'); // pretty print SQL

    vkbeautify.xmlmin(text, true);// minify XML, preserve comments
    vkbeautify.jsonmin(text);// minify JSON
    vkbeautify.cssmin(text);// minify CSS, remove comments ( default )
    vkbeautify.sqlmin(text);// minify SQL

参考：
Ace editor中文文档
ACE Editor 常规使用方法及注意事项
vkbeautify说明文档
vue中 实现xml的格式化和高亮显示