前言

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

• 在Vue專案中整合Ace程式碼編輯器
• Ace配置項目的中文對照
• 踩坑：解決Ace editor 遊標錯位問題
• #最佳化：按需使用ace-builds

簡介

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

• Ace官網
• #線上demo: ace.c9.io/build/kitch…

• # #特性
• 超過110 種語言的
• 語法高亮顯示
（可匯入TextMate/Sublime Text?
• .tmlanguage檔案）
• #超過20 個主題（可以匯入TextMate/Sublime Text?
• .tmtheme檔案）
• 自動縮排和升級
• 一個可選的命令列
• #處理巨大的文檔（四百萬行似乎是極限?。?/ul>

  完全可自訂的鍵綁定，包括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;,
      },
      // 這里可以接收更多組件傳遞的參數，做一些自定義效果
    },
    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;) // 設置內容
        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的最佳化

  在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的簡單集成，更多功能可以參考官網：

  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###與之關聯(lián)的選項###

  editor options

  ##mergeUndoDeltasString | Booleanfalsealways合併撤銷behavioursEnabledBooleantrue-啟用行為#wrapBehavioursEnabledBooleantrue-啟用換行autoScrollEditorIntoViewBooleanfalse#-啟用捲動copyWithEmptySelectionBooleantrue--##enableMultiselect #Booleanfalse-選取多處

  選項名稱	#值類型	預設值	#可選值	功能
  selectionStyle	#String	text	line | text	選取樣式
  highlightActiveLine	Boolean	true	-	高亮目前行
  highlightSelectedWord	Boolean	#true	-	高亮選取文字
  #readOnly	Boolean	false	-	是否只讀
  cursorStyle	String	ace	ace | slim | smooth | wide	遊標樣式
  		##-	複製空格
  		#useSoftTabs	Boolean	false
  使用軟標籤		navigateWithinSoftTabs	Boolean	false
  軟體標籤跳轉

  renderer options#選項名稱值類型預設值可選值功能#false##- 顯示列印邊距printMarginColumn#Number80-Boolean | NumberBooleanBoolean showLineNumbersBooleantrue-顯示行號#布林true-

  			hScrollBarAlwaysVisible	Boolean
  -	縱向捲總是可見
  ##vScrollBarAlwaysVisible	Boolean	false	-	橫向捲軸始終可見
  highlightGutterLine	Boolean	true	-	高亮邊線
  animatedScroll	Boolean	false	-	捲動動畫
  showInvisibles	Boolean	#false	-	顯示不可見字元
  showPrintMargin	Boolean	true
  		##設定頁邊距		printMargin
  false	-	顯示並設定頁邊距		fadeFoldWidgets
  false	-	淡入摺疊元件		showFoldWidgets
  true	-	顯示折疊元件
  		##showGutter

  顯示行號區(qū)域

  displayIndentGuidesBooleanNumber |StringString

  # #true	-	顯示參考線		fontSize
  inherit	-	設定字號		fontFamily
  inherit

  ######################################################################################################### ####設定字型############maxLines######Number#######-######-#######至多行數# ###########minLines######Number######-######-######至少行數######## ####scrollPastEnd######Boolean | Number######0#######-##################fixedWidthGutter# #####Boolean######false######-######已固定行號區(qū)域寬度############theme##########################theme###### String######-######-######主題引用路徑，例如"ace/theme/textmate"###############mouseHandler options ###############選項名稱######值類型######預設值######可選值######備註# #################scrollSpeed######Number######-######-########## #########dragDelay######Number######-#######-######拖曳延遲######### ###dragEnabled######Boolean######true######-######是否啟用拖曳############focusTimout## ####Number######-######-######聚焦超時############tooltipFollowsMo??use######Boolean### ###false######-######滑鼠提示#############

  session options

  ##1-#起始行號overwriteBoolean--重做newLineModeStringauto#auto | unix |windows#新開行模式#useWorkerBoolean--使用輔助物件useSoftTabs Boolean--使用軟標籤tabSize#wrapfoldStylemode##-程式碼匹配模式，例如「ace/mode/text"editor options defined by extensions

  選項名稱	#值型別	預設值	可選值	備註
  firstLineNumber	Number
  ##Number	-	-	標籤大小
  Boolean	-	-	換行
  String	-	markbegin | markbeginend | manual	折疊樣式
  #String	-

  #值類型預設值可選值備註enableBasicAutocompletionBoolean--啟用基本自動完成enableLiveAutocompletion#Boolean --啟用即時自動完成#enableSnippetsBoolean# --啟用程式碼段enableEmmetBoolean- -啟用EmmetuseElasticTabstopsBoolean--#使用彈性製表位解決遊標錯位問題當在編輯器中輸入內容的時候，會出現(xiàn)遊標錯位的問題，開始看起來是正常的，輸入的內容越多，遊標錯位越多

  一通排查，發(fā)現(xiàn)是因為使用了

  非等寬字體

  ，導致計算不準確，將編輯框裡面的字體設定為等寬字體即可解決問題??注意：這裡還有個小坑,在設定等寬字體時需要區(qū)分Mac、Windows

  Mac 下可以使用

  monospace
  字體
  • Windows 下可以使用?Consolas
  ?字體
  • 參考網站/ 原始碼
  #Ace官網
  • vue2-ace-editor
  • #