图文详解如何在Vue项目中集成Ace代码编辑器

npm install ace-builds --save-dev复制代码

<template>
  <div
    ref="editorform"
   
    style="height: 250px"
  >
  </div>
</template>

<script>
import ace from 'ace-builds'
import './webpack-resolver' // 自定义webpack-resolver，按需引入
import 'ace-builds/src-noconflict/mode-json'
import 'ace-builds/src-noconflict/mode-mysql'
import 'ace-builds/src-noconflict/mode-text'
import 'ace-builds/src-noconflict/theme-tomorrow'
import 'ace-builds/src-min-noconflict/ext-language_tools'
import { onMounted, onBeforeUnmount, ref, watch } from '@vue/composition-api'

export default {
  name: 'AceEditor',
  emits: ['onChange'],
  props: {
    value: {
      type: String,
      default: '',
    },
    // 这里可以接收更多组件传递的参数，做一些自定义效果
  },
  setup(props, vm) {
    let editor = null
    const editorform = ref(null)
    let options = {
      theme: 'ace/theme/tomorrow', // 主题
      mode: 'ace/mode/mysql', // 代码匹配模式
      tabSize: 2, //标签大小
      fontSize: 14, //设置字号
      wrap: true, // 用户输入的sql语句，自动换行
      enableSnippets: true, // 启用代码段
      showLineNumbers: true, // 显示行号
      enableLiveAutocompletion: true, // 启用实时自动完成功能 （比如：智能代码提示）
      enableBasicAutocompletion: true, // 启用基本自动完成功能
      scrollPastEnd: true, // 滚动位置
      highlightActiveLine: true, // 高亮当前行
    }

    const init = () => {
      if (editor) {
        //实例销毁
        editor.destroy()
      }
      //初始化
      editor = ace.edit(editorform.value, options)
      editor.setValue(props.value ? props.value : '') // 设置内容
      editor.on('change', () => {
        vm.emit('onChange', editor.getValue())
      })
    }
    
    onMounted(() => {
      init()
    })
    
    onBeforeUnmount(() => {
      editor.destroy()
      editor.container.remove()
    })
    return {
      editorform
    }
  },
}
</script>

<style>
@import '~ace-builds/css/ace.css';
</style>

ace.config.setModuleUrl('ace/mode/mysql', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-mysql.js'))
ace.config.setModuleUrl('ace/mode/text', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-text.js'))
ace.config.setModuleUrl('ace/mode/json', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-json.js'))
ace.config.setModuleUrl('ace/theme/tomorrow', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-tomorrow.js'))
ace.config.setModuleUrl('ace/ext/language_tools', require('file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js'))

import ACE from '@/components/AceEditor' // 这里是你创建的AceEditor文件夹的路径
 
export default {
  install(Vue) {
    Vue.component('ace', ACE)
  },
}

import ace from 'ace-builds'
import RegistAce from './registAce'

Vue.use(ace)
Vue.use(RegistAce)

<ace v-model="content" @onChange="onChange"> </ace>

setOption(optionName, optionValue)
setOptions({
    optionName : optionValue
    ...
})
getOption(optionName)
getOptions()