怎么在Vue項目中集成Ace代碼編輯器

這篇文章主要介紹“怎么在Vue項目中集成Ace代碼編輯器”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么在Vue項目中集成Ace代碼編輯器”文章能幫助大家解決問題。

簡介

Ace 是一個用 JavaScript 編寫的可嵌入代碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和性能相匹配。它可以很容易地嵌入到任何網頁和 JavaScript 應用程序中。Ace 被維護為Cloud9 IDE的主要編輯器 ，并且是 Mozilla Skywriter (Bespin) 項目的繼承者。

特性

• 超過 110 種語言的語法高亮顯示（可以導入TextMate/Sublime Text  .tmlanguage文件）

• 超過 20 個主題（可以導入TextMate/Sublime Text  .tmtheme文件）

• 自動縮進和升級

• 一個可選的命令行

• 處理巨大的文檔（四百萬行似乎是極限！）

• 完全可定制的鍵綁定，包括 vim 和 Emacs 模式

• 使用正則表達式搜索和替換

• 突出顯示匹配的括號

• 在軟選項卡和真實選項卡之間切換

• 顯示隱藏字符

• 使用鼠標拖放文本

• 換行

• 代碼折疊

• 多個光標和選擇

• 實時語法檢查器（當前為 JavaScript/CoffeeScript/CSS/XQuery）

• 剪切、復制和粘貼功能

快速開始

• 你也可以直接使用vue2-ace-editor ，按照步驟集成即可

• 這里主要記錄使用ace-builds，在項目中自己封裝Ace組件

安裝

npm install ace-builds --save-dev復制代碼

安裝完的效果如下：

集成

新建文件夾AceEditor

在AceEditor文件，新建index.vue， 代碼如下：

<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>

關于webpack-resolver.js的優化

在 webpack 環境中需要導入webpack-resolver.js，我們先看下node_modules/ace-builds/webpack-resolver.js文件，里面大部分模塊是我們用不到的，直接引入的話，會大大增加項目包的體積，所以這里我們需要做下優化：按需引入在AceEditor文件，新建webpack-resolver.js， 代碼如下：

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'))

在項目的src目錄下，新建registAce.js

import ACE from '@/components/AceEditor' // 這里是你創建的AceEditor文件夾的路徑
 
export default {
  install(Vue) {
    Vue.component('ace', ACE)
  },
}

在 Vue 項目的入口文件 main.js 中引入 Ace 模塊，Vue.use()全局注冊ace組件

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

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

使用ace組件（全局組件）

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

以上，就在Vue項目中完成了Ace的簡單集成，更多功能可以參考官網： Ace官網

配置項

官網wiki： github.com/ajaxorg/ace…

Core ace components (editor, session, renderer, mouseHandler) implement optionProvider interface

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

以下是配置選項的列表。除非另有說明，否則選項值為布爾值。

editor.setOption也會修改session/renderer/$mouseHandler與之關聯的選項

editor options

renderer options

mouseHandler options

session options

editor options defined by extensions

解決光標錯位問題

當在編輯器中輸入內容的時候，會出現光標錯位的問題，開始看起來是正常的，輸入的內容越多，光標錯位越多一通排查，發現是因為使用了非等寬字體，導致計算不準確，將編輯框里面的字體設置為等寬字體即可解決問題

??注意：這里還有個小坑,在設置等寬字體時需要區分Mac、Windows

• Mac 下可以使用monospace字體

• Windows 下可以使用 Consolas 字體

關于“怎么在Vue項目中集成Ace代碼編輯器”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。