vue2-ace-editor实现一个简单的代码编辑器

vue2-ace-editor实现一个简单的代码编辑器— vue技术交流群（864583465) (此群满可加2群：111822407）

一、安装依赖

npm i vue2-ace-editor --save

二、创建.vue文件，可以直接复制

<template>
  <div class="code-editor">
    <div>
      <!--主题select选择框-->
      <el-select
        v-model="aceConfig.selectTheme"
        @change="handleThemeChange">
        <el-option
          v-for="theme in aceConfig.themes"
          :key="theme"
          :label="theme"
          :value="theme"
        />
      </el-select>
      <!--语言select选择框-->
      <el-select
        v-model="aceConfig.selectLang"
        @change="handleLangChange">
        <el-option
          v-for="lang in aceConfig.langs"
          :key="lang"
          :label="lang"
          :value="lang"
        />
      </el-select>
      <!--编辑器设置按钮-->
    </div>
    <code-editor
      :value="content"
      @input="handleInput"
      @init="editorInit"
      :lang="aceConfig.selectLang"
      :theme="aceConfig.selectTheme"
      :options="aceConfig.options"
      width="100%"
      height="400px"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

const path = require('path')
const files = require.context('brace/theme', false, /\.js$/)
let themes = []
files.keys().forEach((key) => {
  const name = path.basename(key, '.js')
  themes.push(name)
})

@Component({
  components: {
    codeEditor: require('vue2-ace-editor')
  }
})
export default class extends Vue {
  private aceConfig = { // 代码块配置
    langs: [
      'c_cpp',
      'java',
      'mysql',
      'javascript',
      'golang'
    ], // 语言
    themes, // 主题
    tabs: [2, 4, 8], // tab空格
    fontSizes: [14, 15, 16, 17, 18, 19, 20, 21, 22],
    options: {
      tabSize: 4, // tab默认大小
      showPrintMargin: false, // 去除编辑器里的竖线
      fontSize: 16, // 字体大小
      highlightActiveLine: true, // 高亮配置
      enableBasicAutocompletion: true, //启用基本自动完成
      enableSnippets: true, // 启用代码段
      enableLiveAutocompletion: true, // 启用实时自动完成
    },
    selectTheme: 'monokai', // 默认选择的主题
    selectLang: 'java', // 默认选择的语言
    readOnly: false, // 是否只读
  }
  private content: string = ''
  
  handleInput(e){
    console.log(e)
  }
  editorInit(){
    require('brace/ext/language_tools') // language extension prerequsite...
    require(`brace/mode/${this.aceConfig.selectLang}`) // 语言
    require(`brace/theme/${this.aceConfig.selectTheme}`) // 主题
  }
  
  // 代码块主题切换
  handleThemeChange(value) {
    this.aceConfig.selectTheme = value
    this.editorInit()
  }
  // 代码块语言切换
  handleLangChange(value) {
    this.aceConfig.selectLang = value
    this.editorInit()
  }

}
</script>

三、代码说明

const path = require('path')
const files = require.context('brace/theme', false, /\.js$/)
let themes = []
files.keys().forEach((key) => {
  const name = path.basename(key, '.js')
  themes.push(name)
})

上面的代码是从brace/theme目录里找到所有主题的代码，再根据主题名称将其存放在themes数组里

四、其他说明
vue2-ace-editor依赖brace，支持的主题和代码语言都在brace的安装目录里

更多问题的探讨，请加入vue技术交流群（864583465) (此群满可加2群：111822407），你的问答将是我们大家共同进步的关键！！！