前言

在集成Ace過程中發(fā)現(xiàn)網(wǎng)上搜到資料比較零碎，且中文資料比較少，本文主要做一些記錄和整理，方便后續(xù)查閱

• 在Vue項目中集成Ace代碼編輯器
• Ace配置項的中文對照
• 踩坑：解決Ace editor 光標錯位問題
• 優(yōu)化：按需使用ace-builds

簡介

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

• Ace官網(wǎng)
• 在線demo： ace.c9.io/build/kitch…

特性

• 超過 110 種語言的語法高亮顯示（可以導入TextMate/Sublime Text? .tmlanguage文件）
• 超過 20 個主題（可以導入TextMate/Sublime Text? .tmtheme文件）
• 自動縮進和升級
• 一個可選的命令行
• 處理巨大的文檔（四百萬行似乎是極限?。?/li>
• 完全可定制的鍵綁定，包括 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 &#39;ace-builds&#39;
import &#39;./webpack-resolver&#39; // 自定義webpack-resolver，按需引入
import &#39;ace-builds/src-noconflict/mode-json&#39;
import &#39;ace-builds/src-noconflict/mode-mysql&#39;
import &#39;ace-builds/src-noconflict/mode-text&#39;
import &#39;ace-builds/src-noconflict/theme-tomorrow&#39;
import &#39;ace-builds/src-min-noconflict/ext-language_tools&#39;
import { onMounted, onBeforeUnmount, ref, watch } from &#39;@vue/composition-api&#39;

export default {
  name: &#39;AceEditor&#39;,
  emits: [&#39;onChange&#39;],
  props: {
    value: {
      type: String,
      default: &#39;&#39;,
    },
    // 這里可以接收更多組件傳遞的參數(shù)，做一些自定義效果
  },
  setup(props, vm) {
    let editor = null
    const editorform = ref(null)
    let options = {
      theme: &#39;ace/theme/tomorrow&#39;, // 主題
      mode: &#39;ace/mode/mysql&#39;, // 代碼匹配模式
      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 : &#39;&#39;) // 設置內(nèi)容
      editor.on(&#39;change&#39;, () => {
        vm.emit(&#39;onChange&#39;, editor.getValue())
      })
    }
    
    onMounted(() => {
      init()
    })
    
    onBeforeUnmount(() => {
      editor.destroy()
      editor.container.remove()
    })
    return {
      editorform
    }
  },
}
</script>

<style>
@import &#39;~ace-builds/css/ace.css&#39;;
</style>

關于webpack-resolver.js的優(yōu)化

在 webpack 環(huán)境中需要導入webpack-resolver.js，我們先看下node_modules/ace-builds/webpack-resolver.js文件，里面大部分模塊是我們用不到的，直接引入的話，會大大增加項目包的體積，所以這里我們需要做下優(yōu)化：按需引入在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' // 這里是你創(chuàng)建的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的簡單集成，更多功能可以參考官網(wǎng)： Ace官網(wǎng)

配置項

官網(wǎng)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與之關聯(lián)的選項

編輯器選項

渲染器選項

mouseHandler選項

session options

editor options defined by extensions

解決光標錯位問題

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

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

• Mac 下可以使用monospace字體
• Windows 下可以使用?Consolas?字體

參考網(wǎng)站 / 源碼

• Ace官網(wǎng)
• vue2-ace-editor