圖文詳解如何在Vue專案中整合Ace程式碼編輯器

前言

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

• 在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檔案）
• 自動縮排和升級
• 一個可選的命令列
• #處理巨大的文檔（四百萬行似乎是極限！）

完全可自訂的鍵綁定，包括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 環境中需要導入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

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

顯示行號區域

displayIndentGuidesBooleanNumber |StringString

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

######################################################################################################### ####設定字型############maxLines######Number#######-######-#######至多行數# ###########minLines######Number######-######-######至少行數######## ####scrollPastEnd######Boolean | Number######0#######-##################fixedWidthGutter# #####Boolean######false######-######已固定行號區域寬度############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--#使用彈性製表位解決遊標錯位問題當在編輯器中輸入內容的時候，會出現遊標錯位的問題，開始看起來是正常的，輸入的內容越多，遊標錯位越多

一通排查，發現是因為使用了

非等寬字體

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

Mac 下可以使用

monospace

字體
• Windows 下可以使用 Consolas
 字體
• 參考網站/ 原始碼

#Ace官網

• vue2-ace-editor
• #

以上是圖文詳解如何在Vue專案中整合Ace程式碼編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！